Global CSS in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Global CSS in Next.js?

Global CSS in Next.js means styles that apply to the whole app, not just one component. These styles affect every page and component unless overridden.

beginner

Where should you import Global CSS files in a Next.js project?

You should import Global CSS files only in the <code>pages/_app.js</code> or <code>app/layout.tsx</code> file. This ensures styles load once and apply globally.

intermediate

Why can't you import Global CSS files inside individual components in Next.js?

Next.js restricts importing Global CSS in components to avoid style conflicts and ensure predictable styling. Global CSS must be imported once at the app root.

beginner

How do you add a global CSS file in a Next.js 14 app using the App Router?

Place your CSS file in the <code>app</code> folder or <code>styles</code> folder, then import it in <code>app/layout.tsx</code> using <code>import './globals.css'</code>. This applies styles globally.

intermediate

What is the difference between Global CSS and CSS Modules in Next.js?

Global CSS applies styles everywhere in the app. CSS Modules scope styles to a single component, avoiding conflicts by generating unique class names.

Where should you import a global CSS file in a Next.js project?

A In the <code>next.config.js</code> file

B Inside each component that needs it

C In the <code>public</code> folder

D In the <code>pages/_app.js</code> or <code>app/layout.tsx</code> file

Global CSS files must be imported only in pages/_app.js or app/layout.tsx to apply styles globally and avoid conflicts.

What happens if you import a global CSS file inside a component in Next.js?

A The styles will apply globally anyway

B Next.js will throw an error during build

C The styles will be ignored

D The styles will only apply to that component

Next.js does not allow importing global CSS inside components and will throw an error to prevent unpredictable styling.

Which file is the best place to import global CSS in Next.js 14 using the App Router?

A <code>app/layout.tsx</code>

B <code>pages/index.js</code>

C <code>components/Header.js</code>

D <code>next.config.js</code>

In Next.js 14 with the App Router, app/layout.tsx is the root layout file where global CSS should be imported.

What is a key benefit of using Global CSS in Next.js?

A It automatically optimizes CSS size

B Styles are scoped to one component

C Styles apply everywhere without re-importing

D It prevents any CSS conflicts

Global CSS applies styles across the entire app, so you only import once and styles are available everywhere.

How does Global CSS differ from CSS Modules in Next.js?

A Global CSS applies everywhere; CSS Modules scope styles to components

B Global CSS is faster to load than CSS Modules

C CSS Modules are global by default

D Global CSS uses JavaScript variables

Global CSS affects the whole app, while CSS Modules create unique class names to limit styles to one component.

Explain how to properly add and use Global CSS in a Next.js project.

Think about where the app starts and how styles should be loaded once.

Describe the difference between Global CSS and CSS Modules in Next.js and when to use each.

Consider how styles affect multiple parts of the app versus just one part.

Practice

1. In Next.js, where should you import your global CSS file to apply styles across the entire app?

easy

A. In app/layout.js or pages/_app.js

B. In every individual component file

C. Inside public folder

D. In next.config.js

Solution

1. Step 1: Understand global CSS import location

   Global CSS must be imported once at the top-level layout or app file to apply styles app-wide.

2. Step 2: Identify correct files for global CSS import

   Next.js uses app/layout.js in the new app directory or pages/_app.js in the pages directory for this purpose.

3. Final Answer:

   In app/layout.js or pages/_app.js -> Option A

4. Quick Check:

   Global CSS import location = A [OK]

Hint: Global CSS imports go only in app/layout.js or pages/_app.js [OK]

Common Mistakes:

• Importing global CSS in every component causes errors
• Placing CSS files in public folder expecting auto-import
• Trying to import CSS in next.config.js

2. Which of the following is the correct syntax to import a global CSS file named styles.css in app/layout.js?

easy

A. import styles from './styles.css';

B. import './styles.css';

C. require('./styles.css');

D. link rel='stylesheet' href='./styles.css';

Solution

1. Step 1: Recall global CSS import syntax in Next.js

   Global CSS files are imported without assigning to a variable, just using import './filename.css';.

2. Step 2: Evaluate each option

   import styles from './styles.css'; tries to import as a module which is for CSS modules, not global CSS. require('./styles.css'); uses CommonJS require which is not standard in Next.js ES modules. link rel='stylesheet' href='./styles.css'; is HTML syntax, not JavaScript import.

3. Final Answer:

   import './styles.css'; -> Option B

4. Quick Check:

   Global CSS import syntax = D [OK]

Hint: Use plain import './filename.css'; for global CSS [OK]

Common Mistakes:

• Using import with variable for global CSS
• Using require() instead of import
• Trying to add <link> tags inside JS files

3. Given this app/layout.js snippet:

import './globals.css';
export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

If globals.css sets body { background-color: lightblue; }, what will be the background color of the page?

medium

A. White (default background)

B. Black

C. Transparent

D. Lightblue

Solution

1. Step 1: Understand global CSS effect

   Importing globals.css in app/layout.js applies styles globally, including the body background color.

2. Step 2: Check CSS rule impact

   The CSS rule body { background-color: lightblue; } sets the page background color to lightblue.

3. Final Answer:

   Lightblue -> Option D

4. Quick Check:

   Global CSS body background = B [OK]

Hint: Global CSS affects body styles if imported in layout [OK]

Common Mistakes:

• Thinking global CSS won't apply without explicit class
• Assuming default white background overrides CSS
• Confusing local CSS modules with global CSS

4. You added import './globals.css'; inside a React component file instead of app/layout.js. What problem will you most likely face?

medium

A. Next.js build error about global CSS import location

B. CSS styles will apply only to that component

C. No styles will apply anywhere

D. Styles will load twice causing duplication

Solution

1. Step 1: Recall Next.js global CSS import rules

   Next.js requires global CSS to be imported only in app/layout.js or pages/_app.js. Importing elsewhere causes errors.

2. Step 2: Identify error behavior

   Importing global CSS inside a component triggers a build error stating global CSS cannot be imported from non-top-level files.

3. Final Answer:

   Next.js build error about global CSS import location -> Option A

4. Quick Check:

   Global CSS import location error = A [OK]

Hint: Global CSS import outside layout causes build error [OK]

Common Mistakes:

• Importing global CSS in components expecting scoped styles
• Ignoring build errors and expecting styles to work
• Confusing global CSS with CSS modules

5. You want to set a global font and base color for your Next.js app. Which approach correctly applies these styles globally and ensures they affect all pages?

hard

A. Use CSS modules in each component to set font and color

B. Add inline styles to each page component separately

C. Create globals.css with font and color styles, then import it once in app/layout.js

D. Add a <style> tag with font and color in pages/index.js only

Solution

1. Step 1: Understand global styling needs

   Global fonts and colors should be set once to apply app-wide, not repeated per page or component.

2. Step 2: Choose correct global CSS usage

   Creating a globals.css file with base styles and importing it once in app/layout.js ensures consistent global styles.

3. Final Answer:

   Create globals.css and import it once in app/layout.js -> Option C

4. Quick Check:

   Global base styles = C [OK]

Hint: Put base styles in globals.css and import once in layout [OK]

Common Mistakes:

• Using inline styles repeatedly instead of global CSS
• Relying on CSS modules for global styles
• Adding styles only on one page expecting global effect