How to Add CSS in Next.js: Simple Methods Explained

In Next.js, you can add CSS by importing global CSS files in pages/_app.js, using CSS Modules for component-scoped styles with .module.css files, or by using built-in styled-jsx for scoped CSS inside components. Global CSS affects the whole app, while CSS Modules and styled-jsx keep styles local to components.

Syntax

Next.js supports three main ways to add CSS:

• Global CSS: Import a CSS file in pages/_app.js to apply styles globally.
• CSS Modules: Create a CSS file with .module.css extension and import it in your component to scope styles locally.
• Styled JSX: Write CSS inside your component using the <style jsx> tag for scoped styles.

javascript

/* Global CSS import in pages/_app.js */
import '../styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

/* CSS Module usage in a component */
import styles from './Button.module.css'

export default function Button() {
  return <button className={styles.btn}>Click me</button>
}

/* Styled JSX inside a component */
export default function Title() {
  return (
    <>
      <h1>Hello</h1>
      <style jsx>{`
        h1 { color: blue; }
      `}</style>
    </>
  )
}

Example

This example shows how to use global CSS, CSS Modules, and styled-jsx in a Next.js app.

javascript

// pages/_app.js
import '../styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// styles/globals.css
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

// components/Button.module.css
.btn {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

// components/Button.js
import styles from './Button.module.css'

export default function Button() {
  return <button className={styles.btn}>Click me</button>
}

// pages/index.js
import Button from '../components/Button'

export default function Home() {
  return (
    <>
      <h1>Welcome to Next.js</h1>
      <Button />
      <style jsx>{`
        h1 {
          color: green;
          text-align: center;
        }
      `}</style>
    </>
  )
}

Output

<h1 style="color:green; text-align:center;">Welcome to Next.js</h1>
<button style="background-color:#0070f3; color:white; padding:10px 20px; border:none; border-radius:5px; cursor:pointer;">Click me</button>

Common Pitfalls

• Importing global CSS outside pages/_app.js causes errors. Always import global CSS only in _app.js.
• CSS Modules require .module.css extension. Using regular .css files for modules won't scope styles.
• Styled JSX styles are scoped to the component. They won't affect other components unless explicitly shared.

javascript

/* Wrong: importing global CSS in a page component causes error */
// pages/index.js
import '../styles/globals.css' // ❌ This will cause an error

/* Right: import global CSS only in _app.js */
// pages/_app.js
import '../styles/globals.css' // ✅ Correct place

Quick Reference

Method	File Location	Scope	Usage
Global CSS	Import in pages/_app.js	Whole app	For base styles like fonts, resets
CSS Modules	Create .module.css and import in component	Component only	For component-specific styles
Styled JSX	Write inside component with <style jsx>	Component only	For scoped inline styles

Key Takeaways

Import global CSS only in pages/_app.js to avoid errors.

Use CSS Modules with .module.css files for component-scoped styles.

Styled JSX allows writing scoped CSS directly inside components.

Global CSS affects the entire app, while CSS Modules and styled-jsx keep styles local.

Naming CSS files correctly and importing them properly is essential for Next.js styling.