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.