A dinamikus útvonalak olyan oldalak, amelyek lehetővé teszik egyéni paraméterek használatát egy URL-ben. Különösen előnyösek dinamikus tartalommal kapcsolatos oldalak létrehozásakor.

Egy blog esetében dinamikus útvonalat használhat az URL-ek létrehozására a blogbejegyzések címe alapján. Ez a megközelítés jobb, mint minden bejegyzéshez oldalkomponenst létrehozni.

A Next.js fájlban dinamikus útvonalakat hozhat létre két függvény meghatározásával: getStaticProps és getStaticPaths.

Dinamikus útvonal létrehozása a Next.js-ben

Ha dinamikus útvonalat szeretne létrehozni a Next.js-ben, adjon zárójeleket az oldalhoz. Például [params].js, [slug].js vagy [id].js.

Egy bloghoz használhat egy csigát a dinamikus útvonalhoz. Szóval, ha egy poszton lenne a csigája dynamic-routes-nextjs, az eredményül kapott URL lesz https://example.com/dynamic-routes-nextjs.

Az oldalak mappában hozzon létre egy új fájlt [slug].js néven, és hozza létre a Post komponenst, amely a bejegyzés adatait veszi alapul.

const Bejegyzés = ({ postData }) => {
 Visszatérés <div>{/* tartalom */}</div>;
};
instagram viewer

A bejegyzés adatait többféleképpen továbbíthatja a bejegyzésnek. A választott módszer attól függ, hogyan szeretné megjeleníteni az oldalt. Az adatok összeállítási ideje alatti lekéréséhez használja a getStaticProps()-t, kérésre pedig a getServerSideProps()-t.

A getStaticProps használata a bejegyzési adatok lekéréséhez

A blogbejegyzések nem változnak olyan gyakran, és elegendő lekérni őket az építési időben. Tehát módosítsa a Post komponenst a getStaticProps() hozzáadásával.

import { getSinglePost } tól től "../../utils/posts";
const Bejegyzés = ({tartalom }) => {
 Visszatérés <div>{/* tartalom */}</div>;
};
exportconst getStaticProps = async ({ params }) => {
const hozzászólás = várja getSinglePost (params.slug);
Visszatérés {
 kellékek: { ...bejegyzés },
 };
 };

A getStaticProps függvény előállítja az oldalon megjelenített bejegyzési adatokat. A getStaticPaths függvény által generált útvonalak slugját használja.

A getStaticPaths használata útvonalak lekéréséhez

A getStaticPaths() függvény visszaadja az előre megjelenítendő oldalak elérési útját. Módosítsa a bejegyzés összetevőt, hogy tartalmazza:

exportconst getStaticPaths = async () => {
const útvonalak = getAllPosts().map(({ slug }) => ({ params: { slug } }));
Visszatérés {
 utak,
 tartalék: hamis,
 };
};

A getStaticPaths ezen megvalósítása beolvassa az összes megjelenítendő bejegyzést, és a slug-okat paraméterként adja vissza.

Összességében a [slug].js így fog kinézni:

import { getAllPosts, getSinglePost } tól től "../../utils/posts";
const Bejegyzés = ({tartalom }) => {
 Visszatérés <div>{tartalom}</div>;
};


exportconst getStaticPaths = async () => {
const útvonalak = getAllPosts().map(({ slug }) => ({ params: { slug } }));
Visszatérés {
 utak,
 tartalék: hamis,
 };
};


exportconst getStaticProps = async ({ params }) => {
const hozzászólás = várja getSinglePost (params.slug);


Visszatérés {
 kellékek: { ...bejegyzés },
 };
};
exportalapértelmezett Posta;

Dinamikus útvonal létrehozásához együtt kell használnia a getStaticProps() és getStaticPaths() függvényeket. A getStaticPaths() függvény generálja a dinamikus útvonalakat, míg a getStaticProps() lekéri az egyes útvonalakon megjelenített adatokat.

Beágyazott dinamikus útvonalak létrehozása a Next.js-ben

Ha beágyazott útvonalat szeretne létrehozni a Next.js-ben, létre kell hoznia egy új mappát az oldalak mappájában, és el kell mentenie a dinamikus útvonalat abban.

Például a /pages/posts/dynamic-routes-nextjs létrehozásához mentse el a [slug].js fájlt. /pages/posts.

URL-paraméterek elérése a dinamikus útvonalakból

Az útvonal létrehozása után visszakeresheti a URL paraméter a dinamikus útvonalról a useRouter() használatával Reagálás horog.

A pages/[slug].js esetén a következőképpen szerezze be a slug-ot:

import { useRouter } tól től 'next/router'
const Bejegyzés = () => {
const router = userRouter()
const { slug } = router.query
 Visszatérés <p>Bejegyzés: {slug}</p>
}
exportalapértelmezett Hozzászólás

Ez megjeleníti a bejegyzés csigáját.

Dinamikus útválasztás a getServerSideProps segítségével

A Next.js használatával lekérheti az adatokat az összeállítás során, és dinamikus útvonalakat hozhat létre. Ezt a tudást felhasználhatja oldalak előzetes megjelenítésére egy elemlistából.

Ha minden kérésnél adatokat szeretne lekérni, használja a getServerSideProps-t a getStaticProps helyett. Vegye figyelembe, hogy ez a megközelítés lassabb; csak rendszeresen változó adatok fogyasztása esetén használja.