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.
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 bi bio 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.
konst Post = ({ postData }) => {
povratak <div>{/* sadržaj */}</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().
uvoz {getSinglePost} iz "../../utils/posts";konst Post = ({ content }) => {
povratak <div>{/* sadržaj */}</div>;
};
izvozkonst getStaticProps = asinkroni ({params}) => {
konst post = čekati getSinglePost (params.slug);
povratak {
rekviziti: { ...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:
izvozkonst getStaticPaths = asinkroni () => {
konst staze = getAllPosts().map(({ slug }) => ({ parametri: { puž } }));
povratak {
staze,
zamjena: lažno,
};
};
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:
uvoz { getAllPosts, getSinglePost } iz "../../utils/posts";konst Post = ({ content }) => {
povratak <div>{sadržaj}</div>;
};izvozkonst getStaticPaths = asinkroni () => {
konst staze = getAllPosts().map(({ slug }) => ({ parametri: { puž } }));
povratak {
staze,
zamjena: lažno,
};
};izvozkonst getStaticProps = asinkroni ({params}) => {
konst post = čekati getSinglePost (params.slug);povratak {
rekviziti: { ...post },
};
};
izvozzadano 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.
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 /pages/posts.
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:
uvoz {useRouter} iz 'sljedeći/usmjerivač'konst Post = () => {
konst usmjerivač = useRouter()
konst {slug} = router.query
povratak <str>Objava: {slug}</str>
}
izvozzadano 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.
