Pages Router: Layout-Komponente

Erstellen wir zunächst eine Layout-Komponente, die über alle Seiten hinweg genutzt wird.

Erstelle ein oberstes Verzeichnis namens components.
Erstelle innerhalb von components eine Datei namens layout.js mit folgendem Inhalt:

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

Öffne dann pages/posts/first-post.js, füge einen Import für die Layout-Komponente hinzu und mache sie zur äußersten Komponente:

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="/">← Back to home</Link>
      </h2>
    </Layout>
  );
}

CSS hinzufügen

Nun fügen wir dem Layout-Komponenten einige Stile hinzu. Dazu verwenden wir CSS Modules, die es erlauben, CSS-Dateien in einer React-Komponente zu importieren.

Erstelle eine Datei namens components/layout.module.css mit folgendem Inhalt:

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

Wichtig: Um CSS Modules zu nutzen, muss der CSS-Dateiname auf .module.css enden.

Um diese container-Klasse in components/layout.js zu verwenden, musst du:

Die CSS-Datei importieren und ihr einen Namen zuweisen, z.B. styles
styles.container als className verwenden

Öffne components/layout.js und ersetze den Inhalt durch folgendes:

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

Wenn du nun http://localhost:3000/posts/first-post aufrufst, solltest du sehen, dass der Text nun in einem zentrierten Container erscheint:

Layout

Automatisch generierte eindeutige Klassennamen

Wenn du dir nun das HTML in den Entwicklerwerkzeugen deines Browsers ansiehst, wirst du feststellen, dass das div, das von der Layout-Komponente gerendert wird, einen Klassennamen hat, der wie layout_container__... aussieht:

Devtools

Das ist die Funktionsweise von CSS Modules: Es generiert automatisch eindeutige Klassennamen. Solange du CSS Modules verwendest, musst du dir keine Gedanken über Namenskonflikte bei Klassennamen machen.

Darüber hinaus funktioniert Next.js' Code-Splitting-Feature auch mit CSS Modules. Es stellt sicher, dass nur die minimal benötigte CSS-Menge für jede Seite geladen wird. Dies führt zu kleineren Bundle-Größen.

CSS Modules werden während des Build-Prozesses aus den JavaScript-Bundles extrahiert und generieren .css-Dateien, die automatisch von Next.js geladen werden.

Layout-Komponente

CSS hinzufügen

Automatisch generierte eindeutige Klassennamen

On this page