Hvordan lage dynamiske ruter i Next.js

Dynamiske ruter er sider som lar deg bruke egendefinerte parametere i en URL. De er spesielt nyttige når du lager sider for dynamisk innhold.

For en blogg kan du bruke en dynamisk rute for å lage URL-er basert på titlene på blogginnleggene. Denne tilnærmingen er bedre enn å lage en sidekomponent for hvert innlegg.

Du kan lage dynamiske ruter i Next.js ved å definere to funksjoner: getStaticProps og getStaticPaths.

Opprette en dynamisk rute i Next.js

For å lage en dynamisk rute i Next.js, legg til parenteser på en side. For eksempel, [params].js, [slug].js eller [id].js.

For en blogg kan du bruke en snegle for den dynamiske ruten. Så, hvis et innlegg hadde slug dynamic-routes-nextjs, vil den resulterende nettadressen være https://example.com/dynamic-routes-nextjs.

I pages-mappen oppretter du en ny fil kalt [slug].js og oppretter Post-komponenten som tar postdataene som en prop.

konst Post = ({ postData }) => {
 komme tilbake <div>{/* innhold */}</div>;
};

Det er forskjellige måter du kan sende innleggsdataene til Posten. Metoden du velger avhenger av hvordan du vil gjengi siden. For å hente dataene under byggetiden, bruk getStaticProps() og for å hente dem på forespørsel, bruk getServerSideProps().

Bruke getStaticProps for å hente postdata

Blogginnlegg endres ikke så ofte, og det er tilstrekkelig å hente dem på byggetidspunktet. Så, endre Post-komponenten for å inkludere getStaticProps().

import { getSinglePost } fra "../../utils/posts";
konst Innlegg = ({ innhold }) => {
 komme tilbake <div>{/* innhold */}</div>;
};
eksportkonst getStaticProps = asynkron ({ params }) => {
konst innlegg = avvente getSinglePost (params.slug);
komme tilbake {
 rekvisitter: { ...post },
 };
 };

GetStaticProps-funksjonen genererer postdataene som gjengis på siden. Den bruker slug fra banene generert av getStaticPaths-funksjonen.

Bruke getStaticPaths for å hente baner

GetStaticPaths()-funksjonen returnerer banene for sidene som skal forhåndsrenderes. Endre Post-komponenten for å inkludere den:

eksportkonst getStaticPaths = asynkron () => {
konst paths = getAllPosts().map(({ slug }) => ({ params: { mordersnegle } }));
komme tilbake {
 stier,
 falle tilbake: falsk,
 };
};

Denne implementeringen av getStaticPaths henter alle innleggene som skal gjengis og returnerer sneglene som paramer.

Til sammen vil [slug].js se slik ut:

import { getAllPosts, getSinglePost } fra "../../utils/posts";
konst Innlegg = ({ innhold }) => {
 komme tilbake <div>{innhold}</div>;
};
eksportkonst getStaticPaths = asynkron () => {
konst paths = getAllPosts().map(({ slug }) => ({ params: { mordersnegle } }));
komme tilbake {
 stier,
 falle tilbake: falsk,
 };
};
eksportkonst getStaticProps = asynkron ({ params }) => {
konst innlegg = avvente getSinglePost (params.slug);
komme tilbake {
 rekvisitter: { ...post },
 };
};
eksportmisligholde Post;

Du må bruke getStaticProps() og getStaticPaths() sammen for å lage en dynamisk rute. GetStaticPaths()-funksjonen skal generere de dynamiske rutene, mens getStaticProps() henter dataene som er gjengitt på hver rute.

Opprette nestede dynamiske ruter i Next.js

For å opprette en nestet rute i Next.js, må du opprette en ny mappe i sider-mappen og lagre den dynamiske ruten i den.

For å lage /pages/posts/dynamic-routes-nextjs, lagre for eksempel [slug].js inne i /pages/posts.

Tilgang til URL-parametere fra dynamiske ruter

Etter å ha opprettet ruten, kan du hente frem URL-parameter fra den dynamiske ruten ved å bruke useRouter() Reagerkrok.

For sidene/[slug].js, få sneglen slik:

import { useRouter } fra 'neste/ruter'
konst Innlegg = () => {
konst ruter = brukRouter()
konst { slug } = router.query
 komme tilbake <s>Innlegg: {slug}</s>
}
eksportmisligholde Post

Dette vil vise slug av innlegget.

Dynamisk ruting med getServerSideProps

Ved å bruke Next.js kan du hente data på byggetidspunktet og lage dynamiske ruter. Du kan bruke denne kunnskapen til å forhåndsgjengi sider fra en liste over elementer.

Hvis du vil hente data på hver forespørsel, bruk getServerSideProps i stedet for getStaticProps. Merk at denne tilnærmingen er tregere; du bør bare bruke den når du bruker regelmessig skiftende data.