Динамическая маршрутизация в Next.js позволяет создавать маршруты для страниц с динамическими параметрами, что дает возможность создавать страницы, которые могут обрабатывать различные данные или контент на основе значений этих параметров. Вместо создания отдельной страницы для каждого варианта, вы можете использовать единый шаблон страницы и динамически генерировать контент на основе предоставленных параметров.
Next.js использует файловую систему маршрутизации, где каждая страница в директории pages соответствует маршруту. Например, если вы создадите файл с именем about.js, он будет доступен по адресу /about.
Динамические маршруты обрабатываются путем создания файлов или директорий с квадратными скобками. Если у вас есть файл с именем [id].js в директории pages/posts, он будет соответствовать любому маршруту, такому как /posts/1 или /posts/hello-world. Часть в скобках является динамическим сегментом и может быть доступна внутри вашего компонента с помощью хука useRouter из next/router.
Для вложенных динамических маршрутов вы можете использовать папки. Структура файлов, такая как pages/posts/[postId]/[commentId].js, будет соответствовать маршрутам, таким как /posts/123/comment/456. Эти динамические сегменты также могут быть доступны через хук useRouter.
Для навигации между страницами Next.js предоставляет компонент Link из next/link. Это позволяет осуществлять навигацию на стороне клиента между вашими страницами, улучшая производительность, так как при переходе на новую страницу загружаются только необходимые данные.
Пример использования динамической маршрутизации:
// pages/posts/[id].js
import { useRouter } from 'next/router';
export default function Post() {
const router = useRouter();
const { id } = router.query;
return <div>Post ID: {id}</div>;
}В этом примере, если вы перейдете по адресу /posts/123, компонент Post отобразит “Post ID: 123”.
Динамическая маршрутизация в Next.js позволяет создавать гибкие и мощные приложения, где каждая страница может адаптироваться к различным входным данным, обеспечивая удобство и эффективность в управлении контентом.