Dynamiska rutter är sidor som låter dig använda anpassade parametrar i en URL. De är särskilt användbara när du skapar sidor för dynamiskt innehåll.
För en blogg kan du använda en dynamisk rutt för att skapa webbadresser baserat på rubrikerna på blogginläggen. Detta tillvägagångssätt är bättre än att skapa en sidkomponent för varje inlägg.
Du kan skapa dynamiska rutter i Next.js genom att definiera två funktioner: getStaticProps och getStaticPaths.
Skapa en dynamisk rutt i Next.js
För att skapa en dynamisk rutt i Next.js, lägg till parenteser på en sida. Till exempel [params].js, [slug].js eller [id].js.
För en blogg kan du använda en snigel för den dynamiska rutten. Så, om ett inlägg hade slug dynamic-routes-nextjs, skulle den resulterande webbadressen vara https://example.com/dynamic-routes-nextjs.
Skapa en ny fil som heter [slug].js i pages-mappen och skapa Post-komponenten som tar inläggsdata som en rekvisita.
konst Post = ({ postData }) => {
lämna tillbaka <div>{/* innehåll */}</div>;
};
Det finns olika sätt att skicka inläggsdata till Posten. Vilken metod du väljer beror på hur du vill rendera sidan. För att hämta data under byggtiden, använd getStaticProps() och för att hämta den på begäran, använd getServerSideProps().
Använda getStaticProps för att hämta inläggsdata
Blogginlägg ändras inte lika ofta, och det räcker att hämta dem vid byggtiden. Så, modifiera Post-komponenten så att den inkluderar getStaticProps().
importera { getSinglePost } från "../../utils/posts";konst Post = ({ innehåll }) => {
lämna tillbaka <div>{/* innehåll */}</div>;
};
exporterakonst getStaticProps = asynkron ({ params }) => {
konst inlägg = vänta getSinglePost (params.slug);
lämna tillbaka {
rekvisita: { ...post },
};
};
GetStaticProps-funktionen genererar inläggsdata som renderas på sidan. Den använder snigeln från sökvägarna som genereras av getStaticPaths-funktionen.
Använda getStaticPaths för att hämta sökvägar
Funktionen getStaticPaths() returnerar sökvägarna för sidorna som ska förrenderas. Ändra Post-komponenten för att inkludera den:
exporterakonst getStaticPaths = asynkron () => {
konst paths = getAllPosts().map(({ slug }) => ({ params: { snigel } }));
lämna tillbaka {
stigar,
Retirera: falsk,
};
};
Denna implementering av getStaticPaths hämtar alla inlägg som ska renderas och returnerar slugarna som params.
Sammantaget kommer [slug].js att se ut så här:
importera { getAllPosts, getSinglePost } från "../../utils/posts";konst Post = ({ innehåll }) => {
lämna tillbaka <div>{innehåll}</div>;
};exporterakonst getStaticPaths = asynkron () => {
konst paths = getAllPosts().map(({ slug }) => ({ params: { snigel } }));
lämna tillbaka {
stigar,
Retirera: falsk,
};
};exporterakonst getStaticProps = asynkron ({ params }) => {
konst inlägg = vänta getSinglePost (params.slug);lämna tillbaka {
rekvisita: { ...post },
};
};
exporterastandard Posta;
Du måste använda getStaticProps() och getStaticPaths() tillsammans för att skapa en dynamisk rutt. GetStaticPaths()-funktionen bör generera de dynamiska rutterna, medan getStaticProps() hämtar data som renderas vid varje rutt.
Skapa kapslade dynamiska rutter i Next.js
För att skapa en kapslad rutt i Next.js måste du skapa en ny mapp i pages-mappen och spara den dynamiska rutten i den.
Till exempel, för att skapa /pages/posts/dynamic-routes-nextjs, spara [slug].js inuti /pages/posts.
Åtkomst till URL-parametrar från dynamiska rutter
När du har skapat rutten kan du hämta den URL-parameter från den dynamiska rutten med hjälp av useRouter() Reagera krok.
För sidorna/[slug].js, hämta snigeln så här:
importera { useRouter } från 'nästa/router'konst Post = () => {
konst router = useRouter()
konst { slug } = router.query
lämna tillbaka <sid>Inlägg: {slug}</s>
}
exporterastandard Posta
Detta kommer att visa inläggets snigel.
Dynamisk routing med getServerSideProps
Med hjälp av Next.js kan du hämta data vid byggtid och skapa dynamiska rutter. Du kan använda denna kunskap för att förrendera sidor från en lista med objekt.
Om du vill hämta data på varje begäran, använd getServerSideProps istället för getStaticProps. Observera att detta tillvägagångssätt är långsammare; du bör bara använda den när du konsumerar data som ändras regelbundet.