Rutele dinamice sunt pagini care vă permit să utilizați parametri personalizați într-o adresă URL. Ele sunt deosebit de benefice atunci când se creează pagini pentru conținut dinamic.

Pentru un blog, puteți utiliza o rută dinamică pentru a crea adrese URL pe baza titlurilor postărilor de pe blog. Această abordare este mai bună decât crearea unei componente de pagină pentru fiecare postare.

Puteți crea rute dinamice în Next.js definind două funcții: getStaticProps și getStaticPaths.

Crearea unei rute dinamice în Next.js

Pentru a crea o rută dinamică în Next.js, adăugați paranteze la o pagină. De exemplu, [params].js, [slug].js sau [id].js.

Pentru un blog, ai putea folosi un slug pentru traseul dinamic. Deci, dacă o postare avea melcul dynamic-routes-nextjs, URL-ul rezultat ar fi https://example.com/dynamic-routes-nextjs.

În folderul pagini, creați un fișier nou numit [slug].js și creați componenta Post care preia datele postării ca prop.

const Post = ({ postData }) => {
 întoarcere <div>{/* conținut */}</div>;
};
instagram viewer

Există diferite moduri în care puteți transmite datele postării către Post. Metoda pe care o alegeți depinde de modul în care doriți să randați pagina. Pentru a prelua datele în timpul construirii, utilizați getStaticProps() și pentru a le prelua la cerere, utilizați getServerSideProps().

Utilizarea getStaticProps pentru a prelua datele postărilor

Postările de blog nu se schimbă la fel de des și este suficient să le aduci în timpul construirii. Deci, modificați componenta Post pentru a include getStaticProps().

import { getSinglePost } din „../../utils/posts”;
const Postare = ({ continut }) => {
 întoarcere <div>{/* conținut */}</div>;
};
exportconst getStaticProps = asincron ({ parametri }) => {
const post = așteaptă getSinglePost (params.slug);
întoarcere {
 recuzită: { ...post },
 };
 };

Funcția getStaticProps generează datele postării redate pe pagină. Utilizează slug-ul din căile generate de funcția getStaticPaths.

Folosind getStaticPaths pentru a prelua căile

Funcția getStaticPaths() returnează căile pentru paginile care ar trebui să fie pre-rendate. Schimbați componenta Post pentru a o include:

exportconst getStaticPaths = asincron () => {
const căi = getAllPosts().map(({ slug }) => ({ parametrii: { melc } }));
întoarcere {
 poteci,
 da înapoi: fals,
 };
};

Această implementare a getStaticPaths preia toate postările care ar trebui redate și returnează slug-urile ca parametri.

În total, [slug].js va arăta astfel:

import { getAllPosts, getSinglePost } din „../../utils/posts”;
const Postare = ({ continut }) => {
 întoarcere <div>{conţinut}</div>;
};


exportconst getStaticPaths = asincron () => {
const căi = getAllPosts().map(({ slug }) => ({ parametrii: { melc } }));
întoarcere {
 poteci,
 da înapoi: fals,
 };
};


exportconst getStaticProps = asincron ({ parametri }) => {
const post = așteaptă getSinglePost (params.slug);


întoarcere {
 recuzită: { ...post },
 };
};
exportMod implicit Post;

Trebuie să utilizați getStaticProps() și getStaticPaths() împreună pentru a crea o rută dinamică. Funcția getStaticPaths() ar trebui să genereze rutele dinamice, în timp ce getStaticProps() preia datele redate la fiecare rută.

Crearea rutelor dinamice imbricate în Next.js

Pentru a crea o rută imbricată în Next.js, trebuie să creați un folder nou în dosarul pagini și să salvați ruta dinamică în interiorul acestuia.

De exemplu, pentru a crea /pages/posts/dynamic-routes-nextjs, salvați [slug].js în interior /pages/posts.

Accesarea parametrilor URL din rute dinamice

După crearea traseului, puteți prelua parametru URL din ruta dinamică folosind useRouter() Cârlig de reacție.

Pentru paginile/[slug].js, obțineți slug-ul astfel:

import { useRouter } din „următorul/router”
const Postare = () => {
const router = useRouter()
const { slug } = router.query
 întoarcere <p>Postare: {slug}</p>
}
exportMod implicit Post

Aceasta va afișa slug-ul postării.

Rutare dinamică cu getServerSideProps

Folosind Next.js, puteți prelua date în timpul construirii și puteți crea rute dinamice. Puteți folosi aceste cunoștințe pentru a pre-renda pagini dintr-o listă de articole.

Dacă doriți să obțineți date pentru fiecare solicitare, utilizați getServerSideProps în loc de getStaticProps. Rețineți că această abordare este mai lentă; ar trebui să-l utilizați numai atunci când consumați date care se schimbă în mod regulat.