Where and how to import global stylesheets in Next.js

WHAT THIS TESTS: Whether you understand the architectural entry points for global styles in Next.js and know that global CSS must be hoisted to the application root rather than colocated with individual routes or components. Interviewers want to see that you recognize the difference between App Router and Pages Router conventions and that you treat global CSS imports as singleton side effects that should not be duplicated across the tree.

A GOOD ANSWER COVERS: First, distinguish between routing modes. In the App Router, import the global stylesheet at the top of the root layout.js file so every route in the subtree receives the base styles. In the Pages Router, import it in pages/_app.js instead. Second, explain that global CSS should not be imported inside page.js, nested layouts, or reusable components because Next.js intentionally restricts global CSS to root-level files to prevent unintended side effects, cascade duplication, and unpredictable build behavior. Third, mention that CSS Modules or component-level style imports are the correct alternative when you need scoped styles rather than global ones, and that global imports are specifically for resets, typography baselines, or third-party library base styles.

COMMON WRONG ANSWERS: Importing global CSS inside a page.js or a regular component, which Next.js will reject or scope incorrectly. Suggesting to load global styles via a link tag in a custom Document or Head component as a workaround when a simple top-level import is the idiomatic solution. Claiming that global styles must be wrapped in a style jsx tag or loaded through a CDN to avoid import restrictions. Also, forgetting to mention the difference between App Router and Pages Router entry points is a signal that the candidate has only worked in one paradigm and lacks migration knowledge.

LIKELY FOLLOW-UPS: How would you add a third-party CSS library like Bootstrap or Tailwind globally? What happens if two different layouts import different global CSS files? Can you import global CSS in a client component within the App Router? How do CSS Modules differ from global imports in terms of build-time behavior and class hashing? When would you use a CSS-in-JS solution instead of a global stylesheet?

ONE CONCRETE EXAMPLE: Imagine a project using the App Router with a root layout at app/layout.tsx. You would write import 'normalize.css' or import './globals.css' at the top of that file, outside the component definition. Every child page and layout under app/ would then inherit those base styles without needing additional imports. If you were using the Pages Router, you would place the same import at the top of pages/_app.tsx so it executes once when the application mounts and applies across all pages. This pattern keeps global side effects in one predictable location.