Dynamische Routen sind Seiten, die es Ihnen erm\u00f6glichen, benutzerdefinierte Parameter in einer URL zu verwenden. Sie sind besonders n\u00fctzlich beim Erstellen von Seiten f\u00fcr dynamische Inhalte.<\/p>\n
F\u00fcr einen Blog k\u00f6nnen Sie eine dynamische Route verwenden, um URLs basierend auf den Titeln der Blogbeitr\u00e4ge zu erstellen. Dieser Ansatz ist besser als das Erstellen einer Seitenkomponente f\u00fcr jeden Beitrag.<\/p>\n
Sie k\u00f6nnen dynamische Routen in Next.js erstellen, indem Sie zwei Funktionen definieren: getStaticProps und getStaticPaths.<\/p>\n
Um eine dynamische Route in Next.js zu erstellen, f\u00fcgen Sie einer Seite Klammern hinzu. Zum Beispiel [params].js, [slug].js oder [id].js.<\/p>\n
F\u00fcr einen Blog k\u00f6nnten Sie einen Slug f\u00fcr die dynamische Route verwenden. Wenn also ein Beitrag den Slug dynamic-routes-nextjs<\/strong> h\u00e4tte, w\u00e4re die resultierende URL https:\/\/example.com\/dynamic-routes-nextjs<\/a>.<\/p>\n 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.<\/p>\n Es gibt verschiedene M\u00f6glichkeiten, wie Sie die Postdaten an die Post \u00fcbergeben k\u00f6nnen. Welche Methode Sie w\u00e4hlen, h\u00e4ngt davon ab, wie Sie die Seite rendern m\u00f6chten. Um die Daten w\u00e4hrend der Erstellungszeit abzurufen, verwenden Sie getStaticProps() und um sie auf Anfrage abzurufen, verwenden Sie getServerSideProps().<\/p>\n Blogbeitr\u00e4ge \u00e4ndern sich nicht so oft und es reicht aus, sie zur Erstellungszeit abzurufen. \u00c4ndern Sie also die Post-Komponente so, dass sie getStaticProps() enth\u00e4lt.<\/p>\n Die getStaticProps-Funktion generiert die auf der Seite gerenderten Beitragsdaten. Es verwendet den Slug aus den von der getStaticPaths-Funktion generierten Pfaden.<\/p>\n Die Funktion getStaticPaths() gibt die Pfade f\u00fcr die Seiten zur\u00fcck, die vorgerendert werden sollen. \u00c4ndern Sie die Post-Komponente, um sie einzuschlie\u00dfen:<\/p>\n Diese Implementierung von getStaticPaths ruft alle Posts ab, die gerendert werden sollen, und gibt die Slugs als Parameter zur\u00fcck.<\/p>\n Insgesamt sieht [slug].js so aus:<\/p>\n Sie m\u00fcssen getStaticProps() und getStaticPaths() zusammen verwenden, um eine dynamische Route zu erstellen. Die Funktion getStaticPaths() sollte die dynamischen Routen generieren, w\u00e4hrend getStaticProps() die auf jeder Route gerenderten Daten abruft.<\/p>\n Um eine verschachtelte Route in Next.js zu erstellen, m\u00fcssen Sie einen neuen Ordner im Seitenordner erstellen und die dynamische Route darin speichern.<\/p>\n Um beispielsweise \/pages\/posts\/dynamic-routes-nextjs zu erstellen, speichern Sie [slug].js in \/pages\/posts.<\/strong><\/p>\n Nachdem Sie die Route erstellt haben, k\u00f6nnen Sie den URL-Parameter<\/a> aus der dynamischen Route mit dem Hook useRouter() React<\/a> abrufen .<\/p>\n F\u00fcr die Seiten\/[slug].js erhalten Sie den Slug wie folgt:<\/p>\n Dadurch wird der Slug des Beitrags angezeigt.<\/p>\n Mit Next.js k\u00f6nnen Sie Daten zur Build-Zeit abrufen und dynamische Routen erstellen. Sie k\u00f6nnen dieses Wissen verwenden, um Seiten aus einer Liste von Elementen vorab zu rendern.<\/p>\n Wenn Sie bei jeder Anfrage Daten abrufen m\u00f6chten, verwenden Sie getServerSideProps anstelle von getStaticProps. Beachten Sie, dass dieser Ansatz langsamer ist; Sie sollten es nur verwenden, wenn Sie regelm\u00e4\u00dfig wechselnde Daten verbrauchen.<\/p>\nconst Post = ({ postData }) => { return <div>{\/* content *\/}<\/div>;};<\/code><\/pre>\nVerwenden von getStaticProps zum Abrufen von Post-Daten<\/h2>\n
import { getSinglePost } from \"..\/..\/utils\/posts\"; const Post = ({ content }) => { return <div>{\/* content *\/}<\/div>;}; export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.slug); return { props: { ...post }, }; };<\/code><\/pre>\nVerwenden von getStaticPaths zum Abrufen von Pfaden<\/h2>\n
export const getStaticPaths = async() => { const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); return { paths, fallback: false, };};<\/code><\/pre>\nimport { getAllPosts, getSinglePost } from \"..\/..\/utils\/posts\"; const Post = ({ content }) => { return <div>{content}<\/div>;}; export const getStaticPaths = async() => { const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); return { paths, fallback: false, };}; export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.slug); return { props: { ...post }, };}; export default Post;<\/code><\/pre>\nErstellen verschachtelter dynamischer Routen in Next.js<\/h2>\n
Zugriff auf URL-Parameter von dynamischen Routen<\/h2>\n
import { useRouter } from 'next\/router' const Post = () => { const router = useRouter() const { slug } = router.query return <p>Post: {slug}<\/p>} export default Post<\/code><\/pre>\nDynamisches Routing mit getServerSideProps<\/h2>\n