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.

hvorfor kører min disk på 100

MAKEUSE AF DAGENS VIDEO

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.

const Post = ({ postData }) => { 
  return <div>{/* content */}</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().

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-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:

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

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:

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 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 /sider/indlæg.

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 .

spil at spille med facebook venner

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

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 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.