Optimierung der Index-Seite

Als Nächstes aktualisieren wir unsere Index-Seite (pages/index.js). Wir müssen Links zu jeder Beitragsseite hinzufügen, indem wir die Link-Komponente verwenden.

Öffnen Sie pages/index.js und fügen Sie oben in der Datei folgende Imports für Link und Date hinzu:

import Link from 'next/link';
import Date from '../components/date';

Ersetzen Sie dann weiter unten in der Home-Komponente derselben Datei das li-Tag durch folgenden Code:

<li className={utilStyles.listItem} key={id}>
  <Link href={`/posts/${id}`}>{title}</Link>
  <br />
  <small className={utilStyles.lightText}>
    <Date dateString={date} />
  </small>
</li>

Wenn Sie nun zu http://localhost:3000 navigieren, enthält die Seite Links zu jedem Artikel:

Falls etwas nicht funktioniert, überprüfen Sie, ob Ihr Code so aussieht.

Das war's! Bevor wir diese Lektion abschließen, werfen wir auf der nächsten Seite einen Blick auf einige Tipps zu dynamischen Routen.