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, ville den resulterende URL-adressen 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.

const Post = ({ postData }) => {  return <div>{/* content */}</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 } from "../../utils/posts"; const Post = ({ content }) => {  return <div>{/* content */}</div>;}; export const getStaticProps = async ({ params }) => {    const post = await getSinglePost(params.slug);    return {      props: { ...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:

export const getStaticPaths = async() => {  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } }));  return {    paths,    fallback: false,  };};

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 } 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;

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 i /pages/posts.

Tilgang til URL-parametere fra dynamiske ruter

Etter å ha opprettet ruten, kan du hente URL-parameteren fra den dynamiske ruten ved å bruke useRouter() React-kroken.

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

import { useRouter } from 'next/router' const Post = () => {  const router = useRouter()  const { slug } = router.query  return <p>Post: {slug}</p>} export default 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.