Dünaamiliste marsruutide loomine rakenduses Next.js

Dünaamilised marsruudid on lehed, mis võimaldavad teil URL-is kasutada kohandatud parameetreid. Need on eriti kasulikud dünaamilise sisu lehtede loomisel.

Blogi puhul saate ajaveebi postituste pealkirjade põhjal URL-ide loomiseks kasutada dünaamilist marsruuti. See lähenemine on parem kui iga postituse jaoks lehekomponendi loomine.

Saate luua rakenduses Next.js dünaamilisi marsruute, määratledes kaks funktsiooni: getStaticProps ja getStaticPaths.

Dünaamilise marsruudi loomine rakenduses Next.js

Dünaamilise marsruudi loomiseks rakenduses Next.js lisage lehele sulud. Näiteks [params].js, [slug].js või [id].js.

Blogi jaoks võite dünaamilise marsruudi jaoks kasutada nälkjat. Seega, kui postitusel oleks nälkjas dynamic-routes-nextjs, oleks tulemuseks URL https://example.com/dynamic-routes-nextjs.

Looge kaustas Lehed uus fail nimega [slug].js ja looge komponent Postitus, mis võtab postituse andmed rekvisiidina.

konst Postitus = ({ postData }) => {
 tagasi <div>{/* sisu */}</div>;
};

Postituse andmete edastamiseks Postile on erinevaid viise. Valitud meetod sõltub sellest, kuidas soovite lehte renderdada. Ehitamise ajal andmete toomiseks kasutage funktsiooni getStaticProps() ja nõudmisel hankimiseks kasutage getServerSideProps().

GetStaticPropsi kasutamine postitusandmete toomiseks

Blogipostitused ei muutu nii sageli ja piisab nende laadimise ajal hankimisest. Seega muutke Post-komponenti, et see hõlmaks getStaticProps().

importida { getSinglePost } alates "../../utils/posts";
konst Postitus = ({ sisu }) => {
 tagasi <div>{/* sisu */}</div>;
};
eksportidakonst getStaticProps = asünkr ({ params }) => {
konst postitus = ootama getSinglePost (params.slug);
tagasi {
 rekvisiidid: { ...postitus },
 };
 };

Funktsioon getStaticProps genereerib lehel renderdatud postitusandmed. See kasutab funktsiooni getStaticPaths genereeritud teede nälkja.

Rakenduse getStaticPaths kasutamine teede toomiseks

Funktsioon getStaticPaths() tagastab lehtede teed, mis tuleks eelrenderdada. Muutke postituse komponenti selle lisamiseks:

eksportidakonst getStaticPaths = asünkr () => {
konst paths = getAllPosts().map(({ slug }) => ({ parameetrid: { nälkjas } }));
tagasi {
 teed,
 tagavara: vale,
 };
};

See getStaticPathsi teostus tõmbab kõik postitused, mis tuleks renderdada, ja tagastab nälkjad parameetritena.

Kokku näeb [slug].js välja selline:

importida { getAllPosts, getSinglePost } alates "../../utils/posts";
konst Postitus = ({ sisu }) => {
 tagasi <div>{sisu}</div>;
};
eksportidakonst getStaticPaths = asünkr () => {
konst paths = getAllPosts().map(({ slug }) => ({ parameetrid: { nälkjas } }));
tagasi {
 teed,
 tagavara: vale,
 };
};
eksportidakonst getStaticProps = asünkr ({ params }) => {
konst postitus = ootama getSinglePost (params.slug);
tagasi {
 rekvisiidid: { ...postitus },
 };
};
eksportidavaikimisi Postitus;

Dünaamilise marsruudi loomiseks peate koos kasutama getStaticProps() ja getStaticPaths(). Funktsioon getStaticPaths() peaks genereerima dünaamilised marsruudid, samas kui getStaticProps() toob igal marsruudil renderdatud andmed.

Pesastatud dünaamiliste marsruutide loomine rakenduses Next.js

Pesastatud marsruudi loomiseks rakenduses Next.js peate looma lehtede kaustas uue kausta ja salvestama selle sisse dünaamilise marsruudi.

Näiteks /pages/posts/dynamic-routes-nextjs loomiseks salvestage sees fail [slug].js /pages/posts.

Juurdepääs URL-i parameetritele dünaamiliste marsruutide kaudu

Pärast marsruudi loomist saate selle taastada URL-i parameeter dünaamilisel marsruudil, kasutades funktsiooni useRouter() Reageerimiskonks.

Lehtede pages/[slug].js jaoks hankige slug järgmiselt:

importida { useRouter } alates 'järgmine/ruuter'
konst Postitus = () => {
konst ruuter = userRouter()
konst { slug } = ruuter.päring
 tagasi <lk>Postitus: {slug}</lk>
}
eksportidavaikimisi Postita

See kuvab postituse nälkja.

Dünaamiline marsruutimine getServerSidePropsiga

Rakenduse Next.js abil saate andmeid hankida ehitamise ajal ja luua dünaamilisi marsruute. Saate neid teadmisi kasutada lehtede eelrenderdamiseks üksuste loendist.

Kui soovite iga päringu kohta andmeid tuua, kasutage getStaticPropsi asemel getServerSidePropsi. Pange tähele, et see lähenemine on aeglasem; peaksite seda kasutama ainult siis, kui tarbite regulaarselt muutuvaid andmeid.