Dynamické trasy jsou stránky, které umožňují používat vlastní parametry v adrese URL. Jsou zvláště výhodné při vytváření stránek pro dynamický obsah.
Pro blog můžete použít dynamickou cestu k vytvoření URL na základě názvů blogových příspěvků. Tento přístup je lepší než vytváření součásti stránky pro každý příspěvek.
Dynamické trasy v Next.js můžete vytvořit definováním dvou funkcí: getStaticProps a getStaticPaths.
Vytvoření dynamické trasy v Next.js
Chcete-li vytvořit dynamickou trasu v Next.js, přidejte na stránku závorky. Například [params].js, [slug].js nebo [id].js.
Pro blog můžete použít slimák pro dynamickou trasu. Takže, pokud příspěvek měl slimák dynamic-routes-nextjs, výsledná adresa URL by byla https://example.com/dynamic-routes-nextjs.
Ve složce pages vytvořte nový soubor s názvem [slug].js a vytvořte komponentu Post, která vezme data příspěvku jako rekvizitu.
konst Příspěvek = ({ postData }) => {
vrátit se <div>{/* obsah */}</div>;
};
Existují různé způsoby, jak můžete předat data příspěvku příspěvku. Způsob, který zvolíte, závisí na tom, jak chcete stránku vykreslit. Chcete-li načíst data během doby sestavení, použijte getStaticProps() a k načtení na vyžádání použijte getServerSideProps().
Použití getStaticProps k načtení dat příspěvku
Příspěvky na blogu se nemění tak často a stačí je načíst v době sestavování. Upravte tedy komponentu Post tak, aby zahrnovala getStaticProps().
import { getSinglePost } z "../../utils/posts";konst Příspěvek = ({ obsah }) => {
vrátit se <div>{/* obsah */}</div>;
};
vývozníkonst getStaticProps = asynchronní ({ params }) => {
konst příspěvek = čekat getSinglePost (params.slug);
vrátit se {
rekvizity: { ...příspěvek },
};
};
Funkce getStaticProps generuje data příspěvku vykreslená na stránce. Používá slug z cest generovaných funkcí getStaticPaths.
Použití getStaticPaths k načtení cest
Funkce getStaticPaths() vrací cesty pro stránky, které by měly být předem vykresleny. Změňte komponentu Post tak, aby ji zahrnovala:
vývozníkonst getStaticPaths = asynchronní () => {
konst cesty = getAllPosts().map(({ slug }) => ({ parametry: { slimák } }));
vrátit se {
cesty,
ustoupit: Nepravdivé,
};
};
Tato implementace getStaticPaths načte všechny příspěvky, které by měly být vykresleny, a vrátí slugs jako parametry.
Dohromady bude [slug].js vypadat takto:
import { getAllPosts, getSinglePost } z "../../utils/posts";konst Příspěvek = ({ obsah }) => {
vrátit se <div>{obsah}</div>;
};vývozníkonst getStaticPaths = asynchronní () => {
konst cesty = getAllPosts().map(({ slug }) => ({ parametry: { slimák } }));
vrátit se {
cesty,
ustoupit: Nepravdivé,
};
};vývozníkonst getStaticProps = asynchronní ({ params }) => {
konst příspěvek = čekat getSinglePost (params.slug);vrátit se {
rekvizity: { ...příspěvek },
};
};
vývoznívýchozí Pošta;
K vytvoření dynamické trasy musíte použít getStaticProps() a getStaticPaths() společně. Funkce getStaticPaths() by měla generovat dynamické trasy, zatímco getStaticProps() načítá data vykreslená na každé trase.
Vytváření vnořených dynamických tras v Next.js
Chcete-li vytvořit vnořenou trasu v Next.js, musíte vytvořit novou složku ve složce pages a uložit do ní dynamickou trasu.
Chcete-li například vytvořit /pages/posts/dynamic-routes-nextjs, uložte [slug].js dovnitř /pages/posts.
Přístup k parametrům URL z dynamických tras
Po vytvoření trasy můžete načíst Parametr adresy URL z dynamické trasy pomocí useRouter() Reagovat háček.
Pro stránky/[slug].js získáte slug takto:
import { useRouter } z 'další/router'konst Příspěvek = () => {
konst router = useRouter()
konst { slug } = router.query
vrátit se <p>Příspěvek: {slug}</str>
}
vývoznívýchozí Pošta
Tím se zobrazí slimák příspěvku.
Dynamické směrování s getServerSideProps
Pomocí Next.js můžete načítat data v době sestavování a vytvářet dynamické trasy. Tyto znalosti můžete použít k předběžnému vykreslení stránek ze seznamu položek.
Pokud chcete načíst data při každém požadavku, použijte místo getStaticProps getServerSideProps. Všimněte si, že tento přístup je pomalejší; měli byste jej používat pouze při konzumaci pravidelně se měnících dat.
