Next.js - Globale CSS-Unterstützung

In Next.js erstellen wir globale Stile, die auf alle Seiten angewendet werden.

In diesem Beispiel erstellen wir eine styles.css, die mit der Komponente _app.js für alle Komponenten verwendet wird.

Lassen Sie uns das im Kapitel CSS-Support verwendete nextjs-Projekt aktualisieren .

Erstellen Sie zunächst ein Styles-Verzeichnis auf Stammebene und fügen Sie eine Datei styles.css wie folgt hinzu:

html,
body {
   padding: 0;
   margin: 0;
   line-height: 1.6;
   font-size: 18px;
   background-color: lime;
}

* {
   box-sizing: border-box;
}

a {
   color: #0070f3;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

img {
   max-width: 100%;
   display: block;
}

Erstellen Sie die Datei _app.js im Seitenverzeichnis

import '../styles/styles.css'

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Klicken Sie auf den Link Erster Beitrag.