You add global CSS by importing a stylesheet once at the root of the app. In the Pages Router, you can import global stylesheets only in pages/_app.js, so the styles apply to every page.
// pages/_app.js
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
In the App Router, import the file in the root app/layout.js instead. The App Router lifts that restriction, so you can import global styles into any layout, page or component. Keep them for rules that apply everywhere, such as resets. Next.js does not remove a global stylesheet as you navigate between routes, so rules can conflict.
For styles that belong to one component, use CSS Modules instead. They generate unique class names, so the same class can appear in different files without clashing.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓