Динамичните маршрути са страници, които ви позволяват да използвате персонализирани параметри в URL адрес. Те са особено полезни при създаване на страници за динамично съдържание.
За блог можете да използвате динамичен маршрут за създаване на URL адреси въз основа на заглавията на публикациите в блога. Този подход е по-добър от създаването на компонент на страница за всяка публикация.
Можете да създадете динамични маршрути в Next.js, като дефинирате две функции: getStaticProps и getStaticPaths.
Създаване на динамичен маршрут в Next.js
За да създадете динамичен маршрут в Next.js, добавете скоби към страница. Например [params].js, [slug].js или [id].js.
За блог можете да използвате slug за динамичния маршрут. Така че, ако публикация имаше охлюва динамични-маршрути-следващи, полученият URL ще бъде https://example.com/dynamic-routes-nextjs.
В папката на страниците създайте нов файл, наречен [slug].js, и създайте компонента Post, който приема данните за публикацията като опора.
конст Публикуване = ({ postData }) => {
връщане <див>{/* съдържание */}</div>;
};
Има различни начини, по които можете да предадете данните за публикацията на публикацията. Избраният от вас метод зависи от това как искате да изобразите страницата. За да извлечете данните по време на изграждане, използвайте getStaticProps(), а за да ги извлечете при поискване, използвайте getServerSideProps().
Използване на getStaticProps за извличане на публикувани данни
Публикациите в блога не се променят толкова често и извличането им по време на изграждане е достатъчно. Така че, променете компонента Post, за да включите getStaticProps().
импортиране { getSinglePost } от "../../utils/posts";конст Публикация = ({ съдържание }) => {
връщане <див>{/* съдържание */}</div>;
};
износконст getStaticProps = асинхронен ({параметри}) => {
конст пост = изчакайте getSinglePost (params.slug);
връщане {
подпорки: {... публикация },
};
};
Функцията getStaticProps генерира публикуваните данни, изобразени на страницата. Той използва slug от пътищата, генерирани от функцията getStaticPaths.
Използване на getStaticPaths за извличане на пътища
Функцията getStaticPaths() връща пътищата за страниците, които трябва да бъдат предварително изобразени. Променете компонента Post, за да го включите:
износконст getStaticPaths = асинхронен () => {
конст пътища = getAllPosts().map(({ slug }) => ({ параметри: { slug } }));
връщане {
пътеки,
резервен: невярно,
};
};
Тази реализация на getStaticPaths извлича всички публикации, които трябва да бъдат изобразени, и връща охлювите като параметри.
Като цяло [slug].js ще изглежда така:
импортиране { getAllPosts, getSinglePost } от "../../utils/posts";конст Публикация = ({ съдържание }) => {
връщане <див>{съдържание}</div>;
};износконст getStaticPaths = асинхронен () => {
конст пътища = getAllPosts().map(({ slug }) => ({ параметри: { slug } }));
връщане {
пътеки,
резервен: невярно,
};
};износконст getStaticProps = асинхронен ({параметри}) => {
конст пост = изчакайте getSinglePost (params.slug);връщане {
подпорки: {... публикация },
};
};
износпо подразбиране пост;
Трябва да използвате getStaticProps() и getStaticPaths() заедно, за да създадете динамичен маршрут. Функцията getStaticPaths() трябва да генерира динамичните маршрути, докато getStaticProps() извлича данните, изобразени при всеки маршрут.
Създаване на вложени динамични маршрути в Next.js
За да създадете вложен маршрут в Next.js, трябва да създадете нова папка в папката на страниците и да запазите динамичния маршрут в нея.
Например, за да създадете /pages/posts/dynamic-routes-nextjs, запазете [slug].js вътре /pages/posts.
Достъп до URL параметри от динамични маршрути
След като създадете маршрута, можете да извлечете URL параметър от динамичния маршрут с помощта на useRouter() Реагирайте куката.
За страниците/[slug].js вземете slug-а по следния начин:
импортиране {useRouter} от "следващ/рутер"конст Публикувай = () => {
конст рутер = useRouter()
конст { slug } = router.query
връщане <стр>Публикация: {slug}</стр>
}
износпо подразбиране Публикувай
Това ще покаже охлюва на публикацията.
Динамично маршрутизиране с getServerSideProps
С помощта на Next.js можете да извличате данни по време на изграждане и да създавате динамични маршрути. Можете да използвате тези знания за предварително изобразяване на страници от списък с елементи.
Ако искате да извличате данни за всяка заявка, използвайте getServerSideProps вместо getStaticProps. Имайте предвид, че този подход е по-бавен; трябва да го използвате само когато консумирате редовно променящи се данни.
