Dynamische Routen sind Seiten, die es Ihnen ermöglichen, benutzerdefinierte Parameter in einer URL zu verwenden. Sie sind besonders nützlich beim Erstellen von Seiten für dynamische Inhalte.
Für einen Blog können Sie eine dynamische Route verwenden, um URLs basierend auf den Titeln der Blogbeiträge zu erstellen. Dieser Ansatz ist besser als das Erstellen einer Seitenkomponente für jeden Beitrag.
Sie können dynamische Routen in Next.js erstellen, indem Sie zwei Funktionen definieren: getStaticProps und getStaticPaths.
Erstellen einer dynamischen Route in Next.js
Um eine dynamische Route in Next.js zu erstellen, fügen Sie einer Seite Klammern hinzu. Zum Beispiel [params].js, [slug].js oder [id].js.
Für einen Blog könnten Sie einen Slug für die dynamische Route verwenden. Also, wenn ein Beitrag die Schnecke hatte dynamic-routes-nextjs, wäre die resultierende URL https://example.com/dynamic-routes-nextjs.
Erstellen Sie im Seitenordner eine neue Datei mit dem Namen [slug].js und erstellen Sie die Post-Komponente, die die Post-Daten als Requisite verwendet.
konst Beitrag = ({ Beitragsdaten }) => {
zurückkehren <div>{/* Inhalt */}</div>;
};
Es gibt verschiedene Möglichkeiten, wie Sie die Postdaten an die Post übergeben können. Welche Methode Sie wählen, hängt davon ab, wie Sie die Seite rendern möchten. Um die Daten während der Erstellungszeit abzurufen, verwenden Sie getStaticProps() und um sie auf Anfrage abzurufen, verwenden Sie getServerSideProps().
Verwenden von getStaticProps zum Abrufen von Post-Daten
Blog-Posts ändern sich nicht so oft und es reicht aus, sie zur Erstellungszeit abzurufen. Ändern Sie also die Post-Komponente so, dass sie getStaticProps() enthält.
importieren { getSinglePost } aus "../../utils/posts";konst Beitrag = ({ Inhalt }) => {
zurückkehren <div>{/* Inhalt */}</div>;
};
Exportkonst getStaticProps = asynchron ({ Parameter }) => {
konst Beitrag = erwarten getSinglePost (params.slug);
zurückkehren {
Requisiten: {... post },
};
};
Die getStaticProps-Funktion generiert die auf der Seite gerenderten Beitragsdaten. Es verwendet den Slug aus den von der getStaticPaths-Funktion generierten Pfaden.
Verwenden von getStaticPaths zum Abrufen von Pfaden
Die Funktion getStaticPaths() gibt die Pfade für die Seiten zurück, die vorgerendert werden sollen. Ändern Sie die Post-Komponente, um sie einzuschließen:
Exportkonst getStaticPaths = asynchron () => {
konst Pfade = getAllPosts().map(({ Slug }) => ({ Parameter: { Schnecke } }));
zurückkehren {
Wege,
zurückgreifen: FALSCH,
};
};
Diese Implementierung von getStaticPaths ruft alle Posts ab, die gerendert werden sollen, und gibt die Slugs als Parameter zurück.
Insgesamt sieht [slug].js so aus:
importieren { getAllPosts, getSinglePost } aus "../../utils/posts";konst Beitrag = ({ Inhalt }) => {
zurückkehren <div>{Inhalt}</div>;
};Exportkonst getStaticPaths = asynchron () => {
konst Pfade = getAllPosts().map(({ Slug }) => ({ Parameter: { Schnecke } }));
zurückkehren {
Wege,
zurückgreifen: FALSCH,
};
};Exportkonst getStaticProps = asynchron ({ Parameter }) => {
konst Beitrag = erwarten getSinglePost (params.slug);zurückkehren {
Requisiten: {... post },
};
};
ExportStandard Post;
Sie müssen getStaticProps() und getStaticPaths() zusammen verwenden, um eine dynamische Route zu erstellen. Die Funktion getStaticPaths() sollte die dynamischen Routen generieren, während getStaticProps() die auf jeder Route gerenderten Daten abruft.
Erstellen verschachtelter dynamischer Routen in Next.js
Um eine verschachtelte Route in Next.js zu erstellen, müssen Sie einen neuen Ordner im Seitenordner erstellen und die dynamische Route darin speichern.
Um beispielsweise /pages/posts/dynamic-routes-nextjs zu erstellen, speichern Sie [slug].js darin /pages/posts.
Zugriff auf URL-Parameter von dynamischen Routen
Nachdem Sie die Route erstellt haben, können Sie die abrufen URL-Parameter aus der dynamischen Route mit useRouter() Haken reagieren.
Für die Seiten/[slug].js erhalten Sie den Slug wie folgt:
importieren {useRouter} aus 'weiter/router'konst Beitrag = () => {
konst router = useRouter()
konst { slug } = router.abfrage
zurückkehren <P>Beitrag: {Schnecke}</P>
}
ExportStandard Post
Dadurch wird der Slug des Beitrags angezeigt.
Dynamisches Routing mit getServerSideProps
Mit Next.js können Sie Daten zur Build-Zeit abrufen und dynamische Routen erstellen. Sie können dieses Wissen verwenden, um Seiten aus einer Liste von Elementen vorab zu rendern.
Wenn Sie bei jeder Anfrage Daten abrufen möchten, verwenden Sie getServerSideProps anstelle von getStaticProps. Beachten Sie, dass dieser Ansatz langsamer ist; Sie sollten es nur verwenden, wenn Sie regelmäßig wechselnde Daten verbrauchen.
