Kako stvoriti dinamičke rute u Next.js

Dinamičke rute su stranice koje vam omogućuju korištenje prilagođenih parametara u URL-u. Posebno su korisni pri izradi stranica za dinamički sadržaj.

Za blog možete koristiti dinamičku rutu za stvaranje URL-ova na temelju naslova postova na blogu. Ovaj je pristup bolji od stvaranja komponente stranice za svaki post.

---

---

Možete stvoriti dinamičke rute u Next.js definiranjem dvije funkcije: getStaticProps i getStaticPaths.

kako napraviti igre zasnovane na tekstu

MAKEUSEOF VIDEO DANA

Stvaranje dinamičke rute u Next.js

Za izradu dinamičke rute u Next.js, dodajte zagrade na stranicu. Na primjer, [params].js, [slug].js ili [id].js.

Za blog, možete koristiti slug za dinamičnu rutu. Dakle, ako je post imao slug dinamičke-rute-nextjs , rezultirajući URL bio bi https://example.com/dynamic-routes-nextjs.

U mapi stranica stvorite novu datoteku pod nazivom [slug].js i izradite komponentu Post koja uzima podatke objave kao potporu.

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

Postoje različiti načini na koje možete proslijediti podatke objave Postu. Metoda koju odaberete ovisi o tome kako želite prikazati stranicu. Za dohvaćanje podataka tijekom vremena izgradnje upotrijebite getStaticProps(), a za dohvaćanje na zahtjev upotrijebite getServerSideProps().

---

---

Korištenje getStaticProps za dohvaćanje podataka objave

Postovi na blogu se ne mijenjaju tako često i dovoljno ih je dohvatiti u vrijeme izgradnje. Dakle, izmijenite komponentu Post da uključi getStaticProps().

xbox one max veličina vanjskog tvrdog diska

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 generira podatke objave prikazane na stranici. Koristi slug iz staza koje generira funkcija getStaticPaths.

---

---

Korištenje getStaticPaths za dohvaćanje staza

Funkcija getStaticPaths() vraća staze za stranice koje bi trebale biti unaprijed prikazane. Promijenite komponentu Post da biste je uključili:

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

Ova implementacija getStaticPaths dohvaća sve postove koji bi se trebali prikazati i vraća puževe kao parametre.

Sve u svemu, [slug].js će izgledati ovako:

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; 

Morate koristiti getStaticProps() i getStaticPaths() zajedno za stvaranje dinamičke rute. Funkcija getStaticPaths() trebala bi generirati dinamičke rute, dok getStaticProps() dohvaća podatke prikazane na svakoj ruti.

našao sam iphone može li se ući u trag

Stvaranje ugniježđenih dinamičkih ruta u Next.js

Da biste stvorili ugniježđenu rutu u Next.js, morate stvoriti novu mapu unutar mape stranica i spremiti dinamičku rutu unutar nje.

Na primjer, da biste stvorili /pages/posts/dynamic-routes-nextjs, spremite [slug].js unutar /stranice/postovi.

Pristup URL parametrima iz dinamičkih ruta

Nakon izrade rute, možete dohvatiti URL parametar iz dinamičke rute pomoću useRouter() Reagirajte kuku .

Za pages/[slug].js, uzmite slug ovako:

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

Ovo će prikazati slijed posta.

Dinamičko usmjeravanje s getServerSideProps

Koristeći Next.js možete dohvatiti podatke u vrijeme izgradnje i stvoriti dinamičke rute. Ovo znanje možete upotrijebiti za prethodno renderiranje stranica s popisa stavki.

Ako želite dohvatiti podatke na svakom zahtjevu, koristite getServerSideProps umjesto getStaticProps. Imajte na umu da je ovaj pristup sporiji; trebali biste ga koristiti samo kada konzumirate podatke koji se redovito mijenjaju.