Dinaminiai maršrutai yra puslapiai, kuriuose galite naudoti tinkintus parametrus URL. Jie ypač naudingi kuriant dinamiško turinio puslapius.
Tinklaraštyje galite naudoti dinaminį maršrutą, kad sukurtumėte URL pagal tinklaraščio įrašų pavadinimus. Šis metodas yra geresnis nei sukurti puslapio komponentą kiekvienam įrašui.
Galite sukurti dinaminius maršrutus Next.js, apibrėžę dvi funkcijas: getStaticProps ir getStaticPaths.
Dinaminio maršruto kūrimas naudojant Next.js
Norėdami sukurti dinaminį maršrutą Next.js, pridėkite prie puslapio skliaustus. Pavyzdžiui, [params].js, [slug].js arba [id].js.
Tinklaraštyje dinamiškam maršrutui galite naudoti šliužą. Taigi, jei poste būtų šliužas dynamic-routes-nextjs, gautas URL būtų https://example.com/dynamic-routes-nextjs.
Puslapių aplanke sukurkite naują failą pavadinimu [slug].js ir sukurkite Post komponentą, kuris įrašo duomenis kaip rekvizitą.
konst Įrašas = ({ postData }) => {
grąžinti <div>{/* turinys */}</div>;
};
Įrašo duomenis galite perduoti paštui įvairiais būdais. Pasirinktas metodas priklauso nuo to, kaip norite pateikti puslapį. Norėdami gauti duomenis kūrimo metu, naudokite getStaticProps(), o norėdami gauti juos paprašius, naudokite getServerSideProps().
„GetStaticProps“ naudojimas įrašų duomenims gauti
Tinklaraščio įrašai nesikeičia taip dažnai, todėl pakanka juos gauti kūrimo metu. Taigi, modifikuokite Post komponentą, kad įtrauktumėte getStaticProps ().
importuoti { getSinglePost } iš "../../utils/posts";konst Įrašas = ({ turinys }) => {
grąžinti <div>{/* turinys */}</div>;
};
eksportuotikonst getStaticProps = async ({ params }) => {
konst paštas = laukti getSinglePost (params.slug);
grąžinti {
rekvizitas: { ...post },
};
};
Funkcija getStaticProps generuoja puslapyje pateiktus įrašo duomenis. Jis naudoja „getStaticPaths“ funkcijos sugeneruotų takų šliužas.
GetStaticPaths naudojimas keliams gauti
Funkcija getStaticPaths() grąžina puslapių, kurie turėtų būti pateikti iš anksto, kelius. Pakeiskite Post komponentą, kad jį įtrauktumėte:
eksportuotikonst getStaticPaths = async () => {
konst keliai = getAllPosts().map(({ slug }) => ({ parametrai: { šliužas } }));
grąžinti {
takai,
atsitraukti: klaidinga,
};
};
Šis „getStaticPaths“ diegimas paima visus įrašus, kurie turėtų būti pateikti, ir grąžina šliužus kaip parametrus.
Iš viso [slug].js atrodys taip:
importuoti { getAllPosts, getSinglePost } iš "../../utils/posts";konst Įrašas = ({ turinys }) => {
grąžinti <div>{turinys}</div>;
};eksportuotikonst getStaticPaths = async () => {
konst keliai = getAllPosts().map(({ slug }) => ({ parametrai: { šliužas } }));
grąžinti {
takai,
atsitraukti: klaidinga,
};
};eksportuotikonst getStaticProps = async ({ params }) => {
konst paštas = laukti getSinglePost (params.slug);grąžinti {
rekvizitas: { ...post },
};
};
eksportuotinumatytas paštas;
Norėdami sukurti dinaminį maršrutą, turite naudoti getStaticProps() ir getStaticPaths() kartu. Funkcija getStaticPaths() turėtų generuoti dinaminius maršrutus, o getStaticProps() gauna duomenis, pateiktus kiekviename maršrute.
Įdėtų dinaminių maršrutų kūrimas programoje Next.js
Norėdami sukurti įdėtą maršrutą Next.js, turite sukurti naują aplanką puslapių aplanke ir jame išsaugoti dinaminį maršrutą.
Pavyzdžiui, norėdami sukurti /pages/posts/dynamic-routes-nextjs, išsaugokite [slug].js /pages/posts.
Prieiga prie URL parametrų iš dinaminių maršrutų
Sukūrę maršrutą, galite atkurti URL parametras iš dinaminio maršruto naudojant useRouter() Reagavimo kabliukas.
Puslapiams/[slug].js gaukite slug taip:
importuoti { useRouter } iš 'kitas/maršrutizatorius'konst Įrašas = () => {
konst maršrutizatorius = useRouter ()
konst { slug } = router.query
grąžinti <p>Įrašas: {slug}</p>
}
eksportuotinumatytas Įrašas
Bus rodomas įrašo šliužas.
Dinaminis maršruto parinkimas naudojant „getServerSideProps“.
Naudodami Next.js galite gauti duomenis kūrimo metu ir kurti dinamiškus maršrutus. Šias žinias galite naudoti norėdami iš anksto pateikti puslapius iš elementų sąrašo.
Jei norite gauti duomenis pagal kiekvieną užklausą, naudokite getServerSideProps, o ne getStaticProps. Atkreipkite dėmesį, kad šis metodas yra lėtesnis; turėtumėte jį naudoti tik tada, kai vartojate reguliariai besikeičiančius duomenis.
