Routeur de pages - Composant Layout

Commençons par créer un composant Layout qui sera partagé entre toutes les pages.

Créez un répertoire à la racine nommé components.
Dans components, créez un fichier appelé layout.js avec le contenu suivant :

export default function Layout({ children }) {
  return <div>{children}</div>;
}

Ensuite, ouvrez pages/posts/first-post.js, ajoutez une importation pour le composant Layout et utilisez-le comme composant englobant :

import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';
 
export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Retour à l'accueil</Link>
      </h2>
    </Layout>
  );
}

Ajout de CSS

Maintenant, ajoutons quelques styles au composant Layout. Pour ce faire, nous utiliserons les CSS Modules, qui permettent d'importer des fichiers CSS dans un composant React.

Créez un fichier appelé components/layout.module.css avec le contenu suivant :

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

Important : Pour utiliser les CSS Modules, le nom du fichier CSS doit se terminer par .module.css.

Pour utiliser cette classe container dans components/layout.js, vous devez :

Importer le fichier CSS et lui attribuer un nom, comme styles
Utiliser styles.container comme className

Ouvrez components/layout.js et remplacez son contenu par ce qui suit :

import styles from './layout.module.css';
 
export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

Si vous accédez maintenant à http://localhost:3000/posts/first-post, vous devriez voir que le texte est désormais dans un conteneur centré :

Layout

Génération automatique de noms de classe uniques

Si vous examinez le HTML dans les outils de développement de votre navigateur, vous remarquerez que la div rendue par le composant Layout a un nom de classe ressemblant à layout_container__... :

Devtools

C'est ce que font les CSS Modules : Ils génèrent automatiquement des noms de classe uniques. Tant que vous utilisez les CSS Modules, vous n'avez pas à vous soucier des collisions de noms de classe.

De plus, la fonctionnalité de découpage du code (code splitting) de Next.js fonctionne également avec les CSS Modules. Elle garantit que la quantité minimale de CSS est chargée pour chaque page, ce qui réduit la taille des bundles.

Les CSS Modules sont extraits des bundles JavaScript lors de la construction et génèrent des fichiers .css qui sont chargés automatiquement par Next.js.

Composant Layout

Ajout de CSS

Génération automatique de noms de classe uniques

On this page