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