Next.js - CSS-Unterstützung

In Next.js können wir die eingebaute css-in-js-Bibliothek mit dem Namen styled-jsx verwenden. Es ermöglicht das Schreiben von CSS innerhalb einer Reaktionskomponente, und diese Stile gelten für die Komponente.

In diesem Beispiel erstellen wir ein Container-Objekt, mit dem andere Komponenten formatiert werden, indem sie enthalten werden.

Lassen Sie uns Update die nextjs Projekt in verwendete Meta Data Kapitel.

Erstellen Sie zunächst ein Komponentenverzeichnis auf Stammebene und fügen Sie eine Datei container.module.css wie folgt hinzu:

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

Erstellen Sie die Datei container.js im Komponentenverzeichnis

import styles from './container.module.css'

function Container({ children }) {
   return <div className={styles.container}>{children}</div>
}

export default Container

Verwenden Sie nun die Containerkomponente in first.js.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost() {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
            </h2>
         </Container>
      </>	  
   )
}

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 gehen Sie zum ersten Beitrag. Sie sehen die folgende Ausgabe.