Kako ustvariti dinamične poti v Next.js

Dinamične poti so strani, ki vam omogočajo uporabo parametrov po meri v URL-ju. Še posebej so koristni pri ustvarjanju strani za dinamično vsebino.

Za spletni dnevnik lahko uporabite dinamično pot za ustvarjanje URL-jev na podlagi naslovov objav v spletnem dnevniku. Ta pristop je boljši od ustvarjanja komponente strani za vsako objavo.

---

---

V Next.js lahko ustvarite dinamične poti tako, da definirate dve funkciji: getStaticProps in getStaticPaths.

kako prenesti film v računalnik

MAKEUSEOF VIDEO DNEVA

Ustvarjanje dinamične poti v Next.js

Če želite ustvariti dinamično pot v Next.js, na stran dodajte oklepaje. Na primer [params].js, [slug].js ali [id].js.

Za blog bi lahko uporabili polž za dinamično pot. Torej, če je objava imela polž dinamične-poti-nextjs , bi bil končni URL https://example.com/dynamic-routes-nextjs.

V mapi pages ustvarite novo datoteko z imenom [slug].js in ustvarite komponento Post, ki vzame podatke o objavi kot prop.

const Post = ({ postData }) => { 
  return <div>{/* content */}</div>; 
}; 

Obstajajo različni načini, kako lahko podatke o objavi posredujete v Post. Metoda, ki jo izberete, je odvisna od tega, kako želite upodobiti stran. Če želite pridobiti podatke med gradnjo, uporabite getStaticProps(), za pridobivanje na zahtevo pa uporabite getServerSideProps().

---

---

Uporaba getStaticProps za pridobivanje podatkov o objavi

Objave v spletnem dnevniku se ne spreminjajo tako pogosto in zadostuje, da jih pridobite v času gradnje. Torej spremenite komponento Post tako, da vključuje 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 }, 
    }; 
  }; 

Funkcija getStaticProps ustvari podatke o objavi, upodobljene na strani. Uporablja polž iz poti, ki jih ustvari funkcija getStaticPaths.

---

---

Uporaba getStaticPaths za pridobivanje poti

Funkcija getStaticPaths() vrne poti za strani, ki naj bodo vnaprej upodobljene. Spremenite komponento objave, da jo vključite:

ID dogodka 10016 popravilo sistema Windows 10

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

Ta izvedba getStaticPaths pridobi vse objave, ki bi jih bilo treba upodobiti, in vrne polže kot parametre.

Skupaj bo [slug].js videti takole:

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; 

Za ustvarjanje dinamične poti morate skupaj uporabiti getStaticProps() in getStaticPaths(). Funkcija getStaticPaths() bi morala ustvariti dinamične poti, medtem ko getStaticProps() pridobi podatke, upodobljene na vsaki poti.

Ustvarjanje ugnezdenih dinamičnih poti v Next.js

Če želite ustvariti ugnezdeno pot v Next.js, morate ustvariti novo mapo znotraj mape strani in vanjo shraniti dinamično pot.

Na primer, če želite ustvariti /pages/posts/dynamic-routes-nextjs, shranite [slug].js znotraj /strani/objave.

Dostop do parametrov URL iz dinamičnih poti

Ko ustvarite pot, lahko pridobite parameter URL iz dinamične poti z uporabo useRouter() React hook .

Za pages/[slug].js dobite polž takole:

kako zasukati video predvajalnik windows windows

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

To bo prikazalo polž objave.

Dinamično usmerjanje z getServerSideProps

Z uporabo Next.js lahko pridobite podatke v času gradnje in ustvarite dinamične poti. To znanje lahko uporabite za vnaprejšnje upodabljanje strani s seznama elementov.

Če želite pridobiti podatke za vsako zahtevo, uporabite getServerSideProps namesto getStaticProps. Upoštevajte, da je ta pristop počasnejši; uporabljajte ga samo, ko uporabljate podatke, ki se redno spreminjajo.