Next.js 15 Fullstack Web Apps · Leçon

Modules CSS et styles globaux

Organisez vos styles avec les modules CSS pour limiter leur portée locale et gérez efficacement les styles globaux.

Modules CSS et styles globaux est une leçon Next.js 15 Fullstack Web Apps gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack Web Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Styling Your Next.js App

Welcome to styling in Next.js! Creating visually appealing and user-friendly interfaces is crucial for any web application.

Next.js offers powerful and flexible ways to manage your styles, from simple global stylesheets to component-specific solutions. In this lesson, we'll explore two fundamental methods: CSS Modules and Global Styles.

The Global CSS Problem

In traditional web development, all CSS styles are often global. This can lead to issues:

Naming Conflicts: Two different parts of your application might use the same class name, causing unintended style overrides.
Maintenance Headaches: Changing a style in one place might accidentally break the layout or appearance elsewhere.
Lack of Isolation: Styles aren't tied directly to the components they affect, making it harder to understand and manage them.

CSS Modules were created to solve these problems!

What are CSS Modules?

CSS Modules are a way to locally scope CSS by automatically creating unique class names. This means that styles defined in one CSS Module file will only apply to the component that imports it.

Key benefits:

No Conflicts: Unique class names prevent accidental overrides.
Component Isolation: Styles are encapsulated within their components.
Easier Maintenance: You can confidently change styles without worrying about side effects.

Creating a CSS Module File

To create a CSS Module in Next.js, you simply name your CSS file with the .module.css extension. For example, if you're styling a button, you might create Button.module.css.

Here's what a simple CSS Module might look like:

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

.primaryButton:hover {
  background-color: #0056b3;
}

Using a CSS Module in React

Once you have a .module.css file, you can import it into any React component. Next.js then processes these styles, making them available as a JavaScript object.

The class names defined in your CSS Module become properties of this imported object. For instance, .primaryButton becomes styles.primaryButton.

Try running this example to see how a component imports and uses a CSS Module. The actual styling would be applied by Next.js during the build process.

// app/ui/PrimaryButton.js
import styles from './Button.module.css'; // Imports the CSS Module

export default function PrimaryButton({ text }) {
  return (
    // 'styles.primaryButton' uses the class from Button.module.css
    <button className={styles.primaryButton}>
      {text}
    </button>
  );
}

// How this component would be used in app/page.js:
// import PrimaryButton from './ui/PrimaryButton';
//
// export default function HomePage() {
//   return (
//     <div>
//       <h1>My App</h1>
//       <PrimaryButton text="Click Me" />
//     </div>
//   );
// }

Global Styles in Next.js

While CSS Modules are great for component-level styling, some styles need to apply universally across your entire application. These are called Global Styles.

You'd use global styles for:

CSS resets (e.g., to normalize browser defaults).
Base typography (e.g., default font family, line height for body).
Layout styles that affect the entire page structure.
Utility classes that are truly global (e.g., .hidden).

Implementing Global Styles

In Next.js 15 with the App Router, global styles are typically imported into your root app/layout.js file. This ensures they are available to all pages and components within your application.

First, create a global CSS file, usually named globals.css in your app directory:

// app/globals.css
html, body {
  padding: 0;
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #f8f8fa;
  color: #333;
}

h1 {
  color: #1a1a1a;
  font-size: 2em;
  margin-bottom: 0.5em;
}

Then, import it into your app/layout.js to apply these styles application-wide:

// app/layout.js
import './globals.css'; // Import global styles

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children} {/* All pages will be rendered within this layout */}
      </body>
    </html>
  );
}

// A page (app/page.js) would then automatically inherit these styles:
// export default function HomePage() {
//   return (
//     <main>
//       <h1>Hello, Global Styles!</h1>
//       <p>This text uses the font and color defined in globals.css.</p>
//     </main>
//   );
// }

CSS Modules vs. Global: Best Practices

Knowing when to use each styling method is key to a well-organized Next.js application:

Use CSS Modules for: Component-specific styles. If a style belongs to a single component (e.g., a button, a card, a navigation item), it should likely be in a CSS Module.
Use Global Styles for: Application-wide defaults, resets, base typography, and main layout structures. Styles that truly affect every part of your app or establish a baseline.

Mixing both approaches allows for powerful and maintainable styling.

Combining Styles & Specificity

Sometimes you might need to apply multiple styles or conditional styles. You can combine CSS Module classes with regular global classes, or even inline styles:

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

function MyComponent({ isActive }) {
  const activeClass = isActive ? 'global-active-class' : '';
  return (
    <div className={`${styles.container} ${activeClass}`} >
      ... 
    </div>
  );
}

Remember that CSS specificity rules still apply. More specific selectors (e.g., IDs, inline styles) will override less specific ones (e.g., class names).

Quick Check on Styles

Which of the following statements about styling in Next.js are TRUE?

Recap: Styling for Success

You've mastered the fundamentals of styling in Next.js 15!

CSS Modules provide local scope, solving the global CSS problem with unique class names for component-specific styles.
Global Styles are used for application-wide defaults, resets, and base layouts, typically imported in app/layout.js.

By effectively combining these two powerful methods, you can build maintainable, scalable, and visually consistent Next.js applications. Keep practicing to make your UIs shine!

Questions Fréquemment Posées

La leçon « Modules CSS et styles globaux » est-elle gratuite ?

Oui — le texte complet de « Modules CSS et styles globaux » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack Web Apps, passe à CoddyKit PRO. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modules CSS et styles globaux » ?

Organisez vos styles avec les modules CSS pour limiter leur portée locale et gérez efficacement les styles globaux. Tu pratiques Next.js 15 Fullstack Web Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack Web Apps ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack Web Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Modules CSS et styles globaux » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack Web Apps ?

Oui. Chaque leçon Next.js 15 Fullstack Web Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Next.js 15 Fullstack Web Apps