Styling in Next.js

⏱ Estimated reading time: 2 min

Next.js offers multiple built-in options for styling applications. You can choose the approach that best fits your project, from simple CSS files to modern utility-first frameworks.

1. Global CSS

Global CSS styles apply to the entire application and are usually imported in the root layout.

Example

app/
└── globals.css

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

// app/layout.js
import './globals.css';

2. CSS Modules

CSS Modules allow you to scope styles to a specific component.

Example

components/
├── Button.js
└── Button.module.css

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

import styles from './Button.module.css';

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

3. Tailwind CSS

Tailwind CSS is a popular utility-first CSS framework and is fully supported in Next.js.

Example

export default function Card() {
  return (
    <div className="p-4 bg-white shadow rounded">
      Tailwind Styled Card
    </div>
  );
}

Benefits:

• Faster development

• No custom CSS required

• Highly customizable

4. Sass / SCSS

Next.js supports Sass out of the box.

Installation

npm install sass

You can use .scss or .module.scss files.

5. Inline Styles

Inline styles can be used for small or dynamic styles.

export default function Box() {
  return (
    <div style={{ color: 'red', fontSize: '20px' }}>
      Inline Styled Text
    </div>
  );
}

6. Styled JSX

Next.js supports Styled JSX for component-level styling.

export default function Text() {
  return (
    <>
      <p>Hello Next.js</p>
      <style jsx>{`
        p {
          color: green;
        }
      `}</style>
    </>
  );
}

7. External CSS Libraries

You can use libraries like:

• Bootstrap

• Material UI

• Ant Design

These can be imported globally or per component.

Styling Options Comparison

Conclusion

Next.js provides flexible and powerful styling options. Whether you prefer traditional CSS or modern utility-first approaches, Next.js supports all major styling methods for scalable development.