Sådan opretter du dynamiske ruter i Next.js

Dynamiske ruter er sider, der giver dig mulighed for at bruge tilpassede parametre i en URL. De er især gavnlige, når du opretter sider til dynamisk indhold.

For en blog kan du bruge en dynamisk rute til at oprette URL'er baseret på titlerne på blogindlæggene. Denne tilgang er bedre end at oprette en sidekomponent for hvert indlæg.

Du kan oprette dynamiske ruter i Next.js ved at definere to funktioner: getStaticProps og getStaticPaths.

Oprettelse af en dynamisk rute i Next.js

For at oprette en dynamisk rute i Next.js skal du tilføje parenteser til en side. For eksempel [params].js, [slug].js eller [id].js.

Til en blog kan du bruge en snegl til den dynamiske rute. Så hvis en post havde slug dynamic-routes-nextjs, ville den resulterende URL være https://example.com/dynamic-routes-nextjs.

I pages-mappen skal du oprette en ny fil kaldet [slug].js og oprette Post-komponenten, der tager postdataene som en prop.

konst Indlæg = ({ postData }) => {
 Vend tilbage <div>{/* indhold */}</div>;
};

Der er forskellige måder, du kan videregive postdataene til Posten. Den metode, du vælger, afhænger af, hvordan du vil gengive siden. For at hente dataene under byggetiden, brug getStaticProps() og for at hente dem på anmodning, brug getServerSideProps().

Brug af getStaticProps til at hente postdata

Blogindlæg ændres ikke så ofte, og det er tilstrækkeligt at hente dem på byggetidspunktet. Så rediger Post-komponenten til at inkludere getStaticProps().

importere { getSinglePost } fra "../../utils/posts";
konst Indlæg = ({ indhold }) => {
 Vend tilbage <div>{/* indhold */}</div>;
};
eksportkonst getStaticProps = asynkron ({ params }) => {
konst indlæg = vente getSinglePost (params.slug);
Vend tilbage {
 rekvisitter: { ...post },
 };
 };

GetStaticProps-funktionen genererer postdataene, der gengives på siden. Den bruger slug fra stierne genereret af getStaticPaths-funktionen.

Brug af getStaticPaths til at hente stier

GetStaticPaths()-funktionen returnerer stierne til de sider, der skal præ-renderes. Skift Post-komponenten til at inkludere den:

eksportkonst getStaticPaths = asynkron () => {
konst paths = getAllPosts().map(({ slug }) => ({ params: {snegl } }));
Vend tilbage {
 stier,
 Falde tilbage: falsk,
 };
};

Denne implementering af getStaticPaths henter alle de indlæg, der skal gengives, og returnerer slugs som params.

Alt i alt vil [slug].js se sådan ud:

importere { getAllPosts, getSinglePost } fra "../../utils/posts";
konst Indlæg = ({ indhold }) => {
 Vend tilbage <div>{indhold}</div>;
};
eksportkonst getStaticPaths = asynkron () => {
konst paths = getAllPosts().map(({ slug }) => ({ params: {snegl } }));
Vend tilbage {
 stier,
 Falde tilbage: falsk,
 };
};
eksportkonst getStaticProps = asynkron ({ params }) => {
konst indlæg = vente getSinglePost (params.slug);
Vend tilbage {
 rekvisitter: { ...post },
 };
};
eksportStandard Stolpe;

Du skal bruge getStaticProps() og getStaticPaths() sammen for at skabe en dynamisk rute. GetStaticPaths()-funktionen skal generere de dynamiske ruter, mens getStaticProps() henter de data, der gengives på hver rute.

Oprettelse af indlejrede dynamiske ruter i Next.js

For at oprette en indlejret rute i Next.js skal du oprette en ny mappe inde i pages-mappen og gemme den dynamiske rute inde i den.

For at oprette /pages/posts/dynamic-routes-nextjs skal du f.eks. gemme [slug].js inde /pages/posts.

Adgang til URL-parametre fra dynamiske ruter

Når du har oprettet ruten, kan du hente den URL-parameter fra den dynamiske rute ved hjælp af useRouter() Reaktionskrog.

For siderne/[slug].js, få sneglen sådan her:

importere { brug Router } fra 'næste/router'
konst Indlæg = () => {
konst router = brugRouter()
konst { slug } = router.forespørgsel
 Vend tilbage <s>Indlæg: {slug}</s>
}
eksportStandard Stolpe

Dette vil vise postens slug.

Dynamisk routing med getServerSideProps

Ved at bruge Next.js kan du hente data på byggetidspunktet og oprette dynamiske ruter. Du kan bruge denne viden til at prægengive sider fra en liste over elementer.

Hvis du vil hente data på hver anmodning, skal du bruge getServerSideProps i stedet for getStaticProps. Bemærk, at denne tilgang er langsommere; du bør kun bruge det, når du bruger regelmæssigt skiftende data.