Dynaamiset reitit ovat sivuja, joiden avulla voit käyttää mukautettuja parametreja URL-osoitteessa. Ne ovat erityisen hyödyllisiä luotaessa sivuja dynaamiselle sisällölle.
Blogissa voit käyttää dynaamista reittiä luodaksesi URL-osoitteita blogitekstien otsikoiden perusteella. Tämä lähestymistapa on parempi kuin sivukomponentin luominen jokaiselle viestille.
Voit luoda Next.js: ssä dynaamisia reittejä määrittämällä kaksi funktiota: getStaticProps ja getStaticPaths.
Dynaamisen reitin luominen Next.js: ssä
Voit luoda dynaamisen reitin Next.js: ssä lisäämällä sivulle hakasulkeet. Esimerkiksi [params].js, [slug].js tai [id].js.
Blogissa voit käyttää etanaa dynaamiseen reittiin. Jos siis viestissä olisi etana dynamic-routes-nextjs, tuloksena oleva URL-osoite olisi https://example.com/dynamic-routes-nextjs.
Luo sivut-kansioon uusi tiedosto nimeltä [slug].js ja luo Post-komponentti, joka ottaa postauksen tiedot ehdotuksena.
konst Viesti = ({ postData }) => {
palata <div>{/* sisältö */}</div>;
};
Voit välittää viestitiedot postille eri tavoilla. Valitsemasi menetelmä riippuu siitä, kuinka haluat hahmontaa sivun. Voit hakea tiedot rakennusajan aikana käyttämällä getStaticProps()-komentoa ja hakeaksesi ne pyynnöstä käyttämällä getServerSideProps().
GetStaticPropsin käyttäminen viestitietojen hakemiseen
Blogiviestit eivät vaihdu niin usein, ja niiden hakeminen rakennusvaiheessa riittää. Joten muokkaa Post-komponenttia sisällyttämään siihen getStaticProps().
tuonti { getSinglePost } alkaen "../../utils/posts";konst Viesti = ({ sisältö }) => {
palata <div>{/* sisältö */}</div>;
};
viedäkonst getStaticProps = asynk ({ parametrit }) => {
konst viesti = odottaa getSinglePost (params.slug);
palata {
rekvisiitta: { ...post },
};
};
GetStaticProps-toiminto luo sivulla renderöidyt viestitiedot. Se käyttää getStaticPaths-funktion luomien polkujen slugia.
Käytä getStaticPaths-toimintoa polkujen hakemiseen
GetStaticPaths()-funktio palauttaa niiden sivujen polut, jotka pitäisi esihahmontaa. Muuta Post-komponentti sisällyttämään se:
viedäkonst getStaticPaths = asynk () => {
konst polut = getAllPosts().map(({ slug }) => ({ parametrit: { etana } }));
palata {
polut,
perääntyä: väärä,
};
};
Tämä getStaticPaths-toteutus hakee kaikki viestit, jotka pitäisi hahmontaa, ja palauttaa slugs-parametreina.
Kaiken kaikkiaan [slug].js näyttää tältä:
tuonti { getAllPosts, getSinglePost } alkaen "../../utils/posts";konst Viesti = ({ sisältö }) => {
palata <div>{sisältö}</div>;
};viedäkonst getStaticPaths = asynk () => {
konst polut = getAllPosts().map(({ slug }) => ({ parametrit: { etana } }));
palata {
polut,
perääntyä: väärä,
};
};viedäkonst getStaticProps = asynk ({ parametrit }) => {
konst viesti = odottaa getSinglePost (params.slug);palata {
rekvisiitta: { ...post },
};
};
viedäoletuksena Lähettää;
Sinun on käytettävä getStaticProps() ja getStaticPaths() yhdessä dynaamisen reitin luomiseksi. GetStaticPaths()-funktion pitäisi luoda dynaamiset reitit, kun taas getStaticProps() hakee kullakin reitillä hahmonnetut tiedot.
Sisäkkäisten dynaamisten reittien luominen Next.js: ssä
Jos haluat luoda sisäkkäisen reitin Next.js: ssä, sinun on luotava uusi kansio sivut-kansioon ja tallennettava dynaaminen reitti sen sisään.
Jos haluat esimerkiksi luoda /pages/posts/dynamic-routes-nextjs, tallenna [slug].js sisään /pages/posts.
URL-parametrien käyttäminen dynaamisista reiteistä
Kun olet luonut reitin, voit hakea sen URL-parametri dynaamisesta reitistä käyttämällä useRouter() Reaktiokoukku.
Hae sivuille pages/[slug].js slug seuraavasti:
tuonti { käytä reititintä } alkaen 'seuraava/reititin'konst Viesti = () => {
konst reititin = useRouter()
konst { slug } = reititin.kysely
palata <s>Viesti: {slug}</s>
}
viedäoletuksena Lähettää
Tämä näyttää viestin etanan.
Dynaaminen reititys getServerSidePropsin avulla
Next.js: n avulla voit hakea tietoja rakennusvaiheessa ja luoda dynaamisia reittejä. Voit käyttää tätä tietämystä sivujen esihahmontamiseen kohdeluettelosta.
Jos haluat hakea tietoja jokaisesta pyynnöstä, käytä getServerSidePropsia getStaticPropsin sijaan. Huomaa, että tämä lähestymistapa on hitaampi; sinun tulee käyttää sitä vain kuluttaessasi säännöllisesti muuttuvia tietoja.