Global CSS in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does global CSS affect components in Next.js?

Consider a Next.js app where you import a global CSS file in app/layout.js. What is the effect of this global CSS on the components rendered inside the app?

A Global CSS styles are scoped automatically to each component and do not affect other components.

B The global CSS styles apply to all components and elements throughout the app, overriding component-level styles unless those use higher specificity.

C Global CSS only applies to the component where it is imported and does not affect nested components.

D Global CSS is ignored in Next.js unless imported inside each component separately.

💡 Hint

Think about how CSS normally works in web pages and how Next.js handles global styles.

Global CSS files imported in app/layout.js apply styles globally to the entire app. These styles cascade down to all components unless overridden by more specific styles.

📝 Syntax

intermediate

Where should you import global CSS in a Next.js 14 app?

In Next.js 14 using the App Router, where is the correct place to import a global CSS file?

A Inside <code>pages/_app.js</code> file.

B Inside every individual component that needs the styles.

C Inside <code>app/layout.js</code> or <code>app/layout.tsx</code> file.

D Inside <code>next.config.js</code> configuration file.

💡 Hint

Remember that Next.js 14 with App Router replaces the old pages directory.

In Next.js 14 with the App Router, global CSS must be imported in the root layout file app/layout.js or app/layout.tsx. The old pages/_app.js is not used in this setup.

🔧 Debug

advanced

Why does this global CSS import cause an error in Next.js?

Given this app/layout.js snippet:

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

When running the app, you get this error: Global CSS cannot be imported from files other than your root layout. What is the likely cause?

NextJS

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

A The <code>children</code> prop is not passed correctly to the layout.

B The <code>globals.css</code> file is missing from the project directory.

C The <code>RootLayout</code> component is missing a <code>head</code> tag.

D The <code>globals.css</code> file is imported in a file other than the root layout file.

💡 Hint

Check where global CSS imports are allowed in Next.js App Router.

Next.js only allows global CSS imports in the root layout file. Importing global CSS in any other file causes this error.

❓ state_output

advanced

What is the visual effect of this global CSS in Next.js?

Given this globals.css content:

body {
  background-color: #f0f0f0;
  color: #333333;
  font-family: Arial, sans-serif;
}
h1 {
  color: #0070f3;
}

And it is imported in app/layout.js. What will you see on the page?

A The entire page background is light gray, text is dark gray, and all <code>&lt;h1&gt;</code> headings are blue.

B Only <code>&lt;h1&gt;</code> headings have a light gray background and blue text; other text is default.

C The page background is white, text is black, and <code>&lt;h1&gt;</code> headings are unchanged.

D The styles apply only if imported inside each component separately.

💡 Hint

Think about how global CSS affects the whole page.

Global CSS applies to the entire app. The body background becomes light gray, text color changes to dark gray, and all <h1> elements get the blue color.

🧠 Conceptual

expert

Why does Next.js restrict global CSS imports to the root layout?

Next.js enforces that global CSS files can only be imported in the root layout file. What is the main reason for this restriction?

A To ensure global styles are loaded once and avoid duplication or conflicting styles across components.

B Because Next.js does not support CSS at all except in the root layout.

C To force developers to write inline styles instead of CSS files.

D To prevent any CSS from being applied to the app.

💡 Hint

Think about performance and style consistency in large apps.

Restricting global CSS imports to the root layout ensures styles load once, preventing duplication and conflicts. It also helps Next.js optimize CSS loading and avoid unexpected style overrides.

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