Globale Styles

CSS-Module sind nützlich für komponentenspezifische Styles. Wenn Sie jedoch CSS laden möchten, das für jede Seite gilt, unterstützt Next.js dies ebenfalls.

Um globale CSS-Dateien in Ihrer Anwendung zu laden, erstellen Sie eine Datei namens pages/_app.js mit folgendem Inhalt:

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

Der Standard-Export von _app.js ist eine React-Komponente der obersten Ebene, die alle Seiten Ihrer Anwendung umschließt. Sie können diese Komponente verwenden, um den Zustand zwischen Seitenwechseln beizubehalten oder globale Styles hinzuzufügen, wie wir es hier tun. Mehr über die _app.js-Datei erfahren.

Entwicklungsserver neu starten

Wichtig: Sie müssen den Entwicklungsserver neu starten, wenn Sie pages/_app.js hinzufügen. Drücken Sie Strg + C, um den Server zu stoppen, und führen Sie dann aus:

npm run dev

Globale CSS-Dateien hinzufügen

In Next.js können Sie globale CSS-Dateien hinzufügen, indem Sie sie aus pages/_app.js importieren. Sie können globale CSS-Dateien nicht an anderer Stelle importieren.

Der Grund, warum globale CSS-Dateien nicht außerhalb von pages/_app.js importiert werden können, ist, dass sie sich auf alle Elemente der Seite auswirken.

Wenn Sie von der Startseite zur Seite /posts/first-post navigieren würden, würden die globalen Styles der Startseite unbeabsichtigt auf /posts/first-post angewendet.

Sie können die globale CSS-Datei überall platzieren und beliebig benennen. Gehen wir wie folgt vor:

• Erstellen Sie ein übergeordnetes Verzeichnis styles und eine Datei global.css.
• Fügen Sie den folgenden CSS-Code in styles/global.css ein. Dieser Code setzt einige Styles zurück und ändert die Farbe des a-Tags:

html,
body {
  padding: 0;
  margin: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  line-height: 1.6;
  font-size: 18px;
}
 
* {
  box-sizing: border-box;
}
 
a {
  color: #0070f3;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
img {
  max-width: 100%;
  display: block;
}

Importieren Sie abschließend die CSS-Datei in der zuvor erstellten pages/_app.js-Datei:

// `pages/_app.js`
import '../styles/global.css';
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Wenn Sie nun auf http://localhost:3000/posts/first-post zugreifen, werden Sie sehen, dass die Styles angewendet werden. Alle in _app.js importierten Styles werden global auf alle Seiten der Anwendung angewendet.

Falls es nicht funktioniert: Stellen Sie sicher, dass Sie den Entwicklungsserver neu starten, nachdem Sie pages/_app.js aktualisiert haben.