How to Use CSS Modules in Next.js: A Comprehensive Guide

As web developers, we constantly strive for clean, maintainable, and scalable code. When it comes to styling in React applications, using CSS Modules can significantly enhance our ability to control styles by keeping them scoped and conflict-free. This article will delve into how to use CSS Modules in a Next.js environment, complete with TypeScript support, ensuring a robust developer experience.

What Are CSS Modules?

CSS Modules are CSS files in which all class names and animation names are scoped locally by default. This means that the styles defined in a CSS Module are only applied to the component it’s associated with, preventing global scope pollution and unintended style conflicts.

Getting Started with Next.js and TypeScript

First, ensure that you have Node.js installed on your machine. You can check this by running node -v in your terminal. If not installed, download it from the official site.

To create a new Next.js project with TypeScript, you can use the following command:

npx create-next-app my-next-app --typescript

Navigate into your project directory:

cd my-next-app

Using CSS Modules in Next.js

Next.js has built-in support for CSS Modules. To use them, create a CSS file with a .module.css extension. Let’s create a simple component and apply some styles.

Step 1: Create A Component

Create a new component called Button.tsx inside the components directory.

// components/Button.tsx

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

interface ButtonProps {
  text: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ text, onClick }) => {
  return (
    <button className={styles.button} onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

Step 2: Create a CSS Module

Create a CSS Module file named Button.module.css alongside your Button.tsx.

/* components/Button.module.css */

.button {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #005bb5;
}

Step 3: Use the Component

Now, you can use your Button component within a page. Let's include it in the index.tsx file.

// pages/index.tsx

import React from 'react';
import Button from '../components/Button';

const Home: React.FC = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <h1>Welcome to Next.js with CSS Modules</h1>
      <Button text="Click Me" onClick={handleClick} />
    </div>
  );
};

export default Home;

Understanding Type Safety in CSS Modules

If you’re using TypeScript, it’s beneficial to have type safety with your CSS Modules. One way to achieve this is by using a package like typed-css-modules. Alternatively, configure next-typed-css-modules to automatically generate .d.ts files for each CSS module.

To install next-typed-css-modules, run:

npm install --save-dev next-typed-css-modules

Configure your next.config.js to use it:

// next.config.js

const withTM = require('next-typed-css-modules')();

module.exports = withTM({
  // Your Next.js config here
});

This will ensure that .d.ts files are created whenever you run your development server, providing intellisense and type safety for your CSS Module class names.

Conclusion

CSS Modules in Next.js provide a powerful way to write maintainable and conflict-free styles. They work seamlessly with TypeScript, offering type safety and improved code quality through better maintainability. By integrating CSS Modules in your Next.js projects, you can build applications with styles that are easy to manage and scale. Happy coding!