Styling and Static Assets
Add CSS with global styles and CSS Modules, serve images from the public folder, and use next/image for automatic optimization.
Step 1 of 3
Global CSS and CSS Modules
You already know CSS — Next.js just gives it a home. There are two common ways to style an app:
- Global CSS — rules that apply everywhere.
create-next-appmadeapp/globals.css, and the rootlayout.jsimports it withimport "./globals.css". Put resets and site-wide styles here. - CSS Modules — styles scoped to one component. Name a file
something.module.css, import it as an object, and use its class names likeclassName={styles.title}. Next.js renames the classes behind the scenes so they can never clash with another component's.
CSS Modules solve the oldest headache in CSS: two components both defining .title and accidentally overriding each other. With modules, each component's styles stay private.
Think of it this way: Global CSS is the house's central thermostat — it affects every room. A CSS Module is a space heater in one room — it only changes that room, no matter what the other rooms do.
Web Standard
Global CSS can only be imported in the root layout.js. CSS Modules (*.module.css) can be imported into any component file — and they compile to plain, standard CSS class names, just uniquely generated so they don't collide.
Learn more on MDN
TYPESCRIPTREAD ONLY