Introduction

This tutorial is designed to provide you with a solid understanding of how to apply styling in Next.js, a popular React.js framework. By the end of this tutorial, you will have gained the knowledge of how to style your Next.js components and pages using CSS-in-JS approach, global styles, and CSS modules.

You Will Learn:
- Understanding of CSS-in-JS in Next.js.
- How to apply global styles.
- How to use CSS Modules.

Prerequisites
- Basic understanding of Next.js.
- Basic knowledge of CSS.

Step-by-Step Guide

CSS-in-JS

Next.js uses a CSS-in-JS solution, styled-jsx, that allows you to write CSS in JavaScript. It's a powerful and flexible way to style your components. Here’s an example:

export default function Home() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <style jsx>{`
        h1 {
          color: red;
        }
      `}</style>
    </div>
  )
}

The styles you define will be scoped to the component, preventing unwanted side effects in other parts of your application.

Global Styles

For global styles, you can create a styles folder in your project root, then create a global.css file. You can import this file in your _app.js:

import '../styles/global.css'

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

In your global.css file, you can define styles that apply to all components:

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

CSS Modules

Next.js supports CSS Modules using the [name].module.css file naming convention. CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.

import styles from './button.module.css'

export default function Button() {
  return <button className={styles.error}>Destroy</button>
}

Code Examples

Example 1: CSS-in-JS

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>Let's style with CSS-in-JS</p>
      <style jsx>{`
        h1 {
          color: blue;
          font-size: 2em;
        }
        p {
          color: green;
        }
      `}</style>
    </div>
  )
}

Example 2: Global Styles

First, create a new global.css file in your styles directory and add the following:

body {
  background-color: lightgray;
}

Then, import the global.css in _app.js:

import '../styles/global.css'

Example 3: CSS Modules

First, create a new file called button.module.css in your styles directory:

.error {
  color: white;
  background-color: red;
}

Then, import and use it in your component:

import styles from '../styles/button.module.css'

export default function Button() {
  return <button className={styles.error}>Error Button</button>
}

Summary

In this tutorial, you learned how to apply styling in Next.js using CSS-in-JS, global styles, and CSS modules. Now you can confidently style your Next.js applications.

Practice Exercises

1. Exercise 1: Create a component and style it using CSS-in-JS.
2. Exercise 2: Apply a global style to change the background color of your application.
3. Exercise 3: Create a button component and style it using CSS modules.

Solutions

1. Solution to Exercise 1:

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>We are learning to style with CSS-in-JS</p>
      <style jsx>{`
        h1 {
          color: purple;
          font-size: 2em;
        }
        p {
          color: black;
        }
      `}</style>
    </div>
  )
}

1. Solution to Exercise 2:

In your global.css file:

body {
  background-color: #F0F0F0;
}

1. Solution to Exercise 3:

In your button.module.css file:

.success {
  color: white;
  background-color: green;
}

In your component:

import styles from '../styles/button.module.css'

export default function Button() {
  return <button className={styles.success}>Success Button</button>
}

Happy coding! Keep practicing and exploring more about Next.js styling.