0
0
NextJSframework~20 mins

Global CSS in NextJS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Global CSS Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
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?

AGlobal CSS styles are scoped automatically to each component and do not affect other components.
BThe global CSS styles apply to all components and elements throughout the app, overriding component-level styles unless those use higher specificity.
CGlobal CSS only applies to the component where it is imported and does not affect nested components.
DGlobal CSS is ignored in Next.js unless imported inside each component separately.
Attempts:
2 left
💡 Hint

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

📝 Syntax
intermediate
2:00remaining
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?

AInside <code>pages/_app.js</code> file.
BInside every individual component that needs the styles.
CInside <code>app/layout.js</code> or <code>app/layout.tsx</code> file.
DInside <code>next.config.js</code> configuration file.
Attempts:
2 left
💡 Hint

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

🔧 Debug
advanced
2:00remaining
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>
  )
}
AThe <code>children</code> prop is not passed correctly to the layout.
BThe <code>globals.css</code> file is missing from the project directory.
CThe <code>RootLayout</code> component is missing a <code>head</code> tag.
DThe <code>globals.css</code> file is imported in a file other than the root layout file.
Attempts:
2 left
💡 Hint

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

❓ state_output
advanced
2:00remaining
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?

AThe entire page background is light gray, text is dark gray, and all <code>&lt;h1&gt;</code> headings are blue.
BOnly <code>&lt;h1&gt;</code> headings have a light gray background and blue text; other text is default.
CThe page background is white, text is black, and <code>&lt;h1&gt;</code> headings are unchanged.
DThe styles apply only if imported inside each component separately.
Attempts:
2 left
💡 Hint

Think about how global CSS affects the whole page.

🧠 Conceptual
expert
3:00remaining
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?

ATo ensure global styles are loaded once and avoid duplication or conflicting styles across components.
BBecause Next.js does not support CSS at all except in the root layout.
CTo force developers to write inline styles instead of CSS files.
DTo prevent any CSS from being applied to the app.
Attempts:
2 left
💡 Hint

Think about performance and style consistency in large apps.