Next.js - CSS Support

Next.js - CSS Styling Approaches

Next.js offers several ways to style your application, catering to different preferences and project needs. Modern web development often involves component-scoped styles to avoid conflicts and improve maintainability.

One of the most common and recommended approaches is using CSS Modules. This technique automatically scopes CSS class names locally to the component, preventing global namespace collisions.

In this example, we’ll create a simple Layout component using CSS Modules to provide basic structure and styling.

Let’s assume you have a standard Next.js project setup (e.g., using create-next-app).

First, create a components directory at the root level if it doesn’t exist. Inside components, create a file named layout.module.css with the following content:

.container {
    max-width: 36rem;
    padding: 0 1rem;
    margin: 3rem auto 6rem;
    border: 1px solid #eaeaec;
    border-radius: 8px;
}

Note how CSS properties like max-width and border-radius are written. CSS Modules files conventionally end with .module.css.

Next, create the corresponding component file layout.js (or layout.jsx) in the components directory:

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

function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

export default Layout;

Here, we import the CSS module as styles. The unique class name (e.g., layout_container__XYZ12) generated by Next.js for .container is accessed via styles.container. This ensures the styles only apply within this component.

Now, let’s use this Layout component in one of our pages, for example, pages/posts/first-post.js:

import Link from 'next/link';
import Head from 'next/head';
import Layout from '../../components/layout';

export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>My First Post</title>
      </Head>
      <h1>My First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
      <p>This is the content of the first post, wrapped by our Layout component.</p>
    </Layout>
  );
}

Other popular styling methods in Next.js include:

Global CSS: Suitable for base styles (see next chapter).
Tailwind CSS: A utility-first CSS framework with excellent Next.js integration.
CSS-in-JS Libraries: Such as styled-components or Emotion, allowing CSS directly within JavaScript/TypeScript files.
Sass/SCSS: Next.js has built-in support for Sass.

Choosing the right method depends on your project’s scale, team preference, and specific requirements. CSS Modules provide a good balance of features and simplicity for many projects.

Running the Development Server

Ensure your Next.js development server is running:

npm run dev

# Example Output:
# ready - started server on 0.0.0.0:3000, url: http://localhost:3000
# event - compiled client and server successfully in 184 ms (20 modules)
# wait  - compiling /posts/first-post (client and server)...
# event - compiled client and server successfully in 212 ms (47 modules)

Verify Output

Navigate to /posts/first-post in your browser (e.g., http://localhost:3000/posts/first-post). You should see the content of the ‘First Post’ page centered within a container that has a light gray border and some padding/margin, as defined in layout.module.css.