Next.js - Metadaten
In Next.js können wir den Kopfbereich jeder Reaktionsseite sehr einfach mit Hilfe von ändern <Head> Reaktionskomponente, die eingebaut ist.
Lassen Sie uns das im Kapitel " Seiten " verwendete nextjs-Projekt aktualisieren .
Aktualisieren Sie index.js wie folgt:
import Link from 'next/link'
import Head from 'next/head'
function HomePage() {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<Link href="/posts/first"><a>First Post</a></Link>
<br/>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export default HomePage
Aktualisieren Sie first.js wie folgt:
import Link from 'next/link'
import Head from 'next/head'
export default function FirstPost() {
return (
<>
<Head>
<title>My First Post</title>
</Head>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
</>
)
}
Hier haben wir einen Verweis auf logo.png in der Datei index.js hinzugefügt.
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 Erste Seite und überprüfen Sie, ob der Titel auch auf der Seite Erster Beitrag geändert wurde.
