Dynamické trasy sú stránky, ktoré vám umožňujú používať vlastné parametre v adrese URL. Sú užitočné najmä pri vytváraní stránok pre dynamický obsah.
V prípade blogu môžete použiť dynamickú trasu na vytvorenie adries URL na základe názvov blogových príspevkov. Tento prístup je lepší ako vytváranie komponentu stránky pre každý príspevok.
Dynamické trasy v Next.js môžete vytvoriť definovaním dvoch funkcií: getStaticProps a getStaticPaths.
Vytvorenie dynamickej trasy v Next.js
Ak chcete vytvoriť dynamickú trasu v súbore Next.js, pridajte na stránku zátvorky. Napríklad [params].js, [slug].js alebo [id].js.
Pre blog môžete použiť slimák pre dynamickú trasu. Takže, ak príspevok mal slimák dynamic-routes-nextjs, výsledná adresa URL by bola https://example.com/dynamic-routes-nextjs.
V priečinku Stránky vytvorte nový súbor s názvom [slug].js a vytvorte komponent Post, ktorý prevezme údaje príspevku ako rekvizitu.
konšt Príspevok = ({ postData }) => {
vrátiť <div>{/* obsah */}</div>;
};
Existujú rôzne spôsoby, ako môžete odoslať údaje príspevku do príspevku. Spôsob, ktorý si vyberiete, závisí od toho, ako chcete stránku vykresliť. Na načítanie údajov počas zostavovania použite getStaticProps() a na ich načítanie na požiadanie použite getServerSideProps().
Použitie getStaticProps na načítanie údajov príspevku
Blogové príspevky sa nemenia tak často a stačí ich načítať v čase zostavovania. Upravte teda komponent Post tak, aby obsahoval getStaticProps().
importovať { getSinglePost } od "../../utils/posts";konšt Príspevok = ({ obsah }) => {
vrátiť <div>{/* obsah */}</div>;
};
exportkonšt getStaticProps = async ({ params }) => {
konšt príspevok = čakať getSinglePost (params.slug);
vrátiť {
rekvizity: { ...príspevok },
};
};
Funkcia getStaticProps generuje údaje príspevku vykreslené na stránke. Používa slug z ciest generovaných funkciou getStaticPaths.
Použitie getStaticPaths na načítanie ciest
Funkcia getStaticPaths() vracia cesty pre stránky, ktoré by mali byť vopred vykreslené. Zmeňte komponent Post tak, aby ho obsahoval:
exportkonšt getStaticPaths = async () => {
konšt cesty = getAllPosts().map(({ slimák }) => ({ parametre: { slimák } }));
vrátiť {
cesty,
záložný: falošný,
};
};
Táto implementácia getStaticPaths načíta všetky príspevky, ktoré by sa mali vykresliť, a vráti slimáky ako parametre.
Celkovo bude [slug].js vyzerať takto:
importovať { getAllPosts, getSinglePost } od "../../utils/posts";konšt Príspevok = ({ obsah }) => {
vrátiť <div>{content}</div>;
};exportkonšt getStaticPaths = async () => {
konšt cesty = getAllPosts().map(({ slimák }) => ({ parametre: { slimák } }));
vrátiť {
cesty,
záložný: falošný,
};
};exportkonšt getStaticProps = async ({ params }) => {
konšt príspevok = čakať getSinglePost (params.slug);vrátiť {
rekvizity: { ...príspevok },
};
};
exportpredvolená Príspevok;
Na vytvorenie dynamickej trasy musíte použiť getStaticProps() a getStaticPaths() spolu. Funkcia getStaticPaths() by mala generovať dynamické trasy, zatiaľ čo funkcia getStaticProps() načítava údaje vykreslené na každej trase.
Vytváranie vnorených dynamických trás v Next.js
Ak chcete vytvoriť vnorenú trasu v súbore Next.js, musíte vytvoriť nový priečinok v priečinku stránok a uložiť doň dynamickú trasu.
Ak chcete napríklad vytvoriť /pages/posts/dynamic-routes-nextjs, uložte [slug].js do /pages/posts.
Prístup k parametrom URL z dynamických trás
Po vytvorení trasy môžete načítať parameter adresy URL z dynamickej trasy pomocou useRouter() Reagovať hák.
Pre stránky/[slug].js získajte slug takto:
importovať { useRouter } od 'ďalší/smerovač'konšt Príspevok = () => {
konšt router = useRouter()
konšt { slug } = router.query
vrátiť <p>Príspevok: {slug}</str>
}
exportpredvolená Príspevok
Tým sa zobrazí slimák príspevku.
Dynamické smerovanie s getServerSideProps
Pomocou Next.js môžete načítať údaje v čase zostavovania a vytvárať dynamické trasy. Tieto znalosti môžete použiť na predbežné vykreslenie stránok zo zoznamu položiek.
Ak chcete načítať údaje pri každej požiadavke, použite getServerSideProps namiesto getStaticProps. Všimnite si, že tento prístup je pomalší; mali by ste ho používať iba pri konzumácii pravidelne sa meniacich údajov.