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.
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 bi 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.
konst Objava = ({ postData }) => {
vrnitev <div>{/* vsebina */}</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().
uvoz { getSinglePost } od "../../utils/posts";konst Objava = ({ vsebina }) => {
vrnitev <div>{/* vsebina */}</div>;
};
izvozkonst getStaticProps = asinh ({ params }) => {
konst objava = čakati getSinglePost (params.slug);
vrnitev {
rekviziti: { ...objava },
};
};
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:
izvozkonst getStaticPaths = asinh () => {
konst poti = getAllPosts().map(({ slug }) => ({ params: { polž } }));
vrnitev {
poti,
pasti nazaj: lažno,
};
};
Ta izvedba getStaticPaths pridobi vse objave, ki bi jih bilo treba upodobiti, in vrne polže kot parametre.
Skupaj bo [slug].js videti takole:
uvoz { getAllPosts, getSinglePost } od "../../utils/posts";konst Objava = ({ vsebina }) => {
vrnitev <div>{vsebina}</div>;
};izvozkonst getStaticPaths = asinh () => {
konst poti = getAllPosts().map(({ slug }) => ({ params: { polž } }));
vrnitev {
poti,
pasti nazaj: lažno,
};
};izvozkonst getStaticProps = asinh ({ params }) => {
konst objava = čakati getSinglePost (params.slug);vrnitev {
rekviziti: { ...objava },
};
};
izvozprivzeto 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 /pages/posts.
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:
uvoz {useRouter} od 'naslednji/usmerjevalnik'konst Objava = () => {
konst usmerjevalnik = useRouter()
konst { polž } = router.query
vrnitev <str>Objava: {slug}</str>
}
izvozprivzeto Objavi
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.
