Динамическая маршрутизация в приложениях Next.js

В веб-разработке создание динамического и персонализированного контента имеет важное значение для обеспечения привлекательного пользовательского опыта. С Next.js, популярной средой React, динамическая маршрутизация становится проще простого. В этой статье мы подробно углубимся в динамическую маршрутизацию в Next.js, поймем ее важность и изучим различные методы с помощью простых для понимания примеров кода.

Что такое динамическая маршрутизация?

Динамическая маршрутизация позволяет создавать страницы с различным содержимым на основе определенных параметров, таких как идентификаторы, пули или любые другие данные из вашего бэкэнда или API. В отличие от статических маршрутов, где каждая страница имеет предопределенный маршрут, динамическая маршрутизация позволяет создавать страницы «на лету» и настраивать их содержимое.

Next.js предоставляет мощный механизм динамической маршрутизации, что делает его отличным выбором для создания приложений, требующих динамического и персонализированного контента.

Создание динамических маршрутов

В Next.js динамические маршруты определяются с помощью квадратных скобок ([]) внутри каталога pages. Вот как вы можете создать динамический маршрут для отдельных сообщений в блоге:

Создайте файл с именем [slug].js в каталоге pages/posts.
Внутри этого файла вы можете получить доступ к динамическому параметру, используя крючок useRouter из next/router:

import { useRouter } from 'next/router';

function Post() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Post: {slug}</h1>
    </div>
  );
}

export default Post;

Здесь часть [slug] в имени файла соответствует динамическому сегменту URL-адреса. Например, если вы получаете доступ к /posts/my-dynamic-post, slug будет равно 'my-dynamic-post'.

Генерация динамических маршрутов

Для динамического создания динамических маршрутов вы можете использовать функцию getStaticPaths внутри компонента динамического маршрута. Эта функция определяет, какие пути должны быть предварительно отображены во время сборки. Давайте изменим наш файл [slug].js, включив в него следующее:

import { useRouter } from 'next/router';

function Post({ post }) {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Post: {slug}</h1>
      <p>{post.content}</p>…

Динамическая маршрутизация в приложениях Next.js