Як створити динамічні маршрути в Next.js

Динамічні маршрути – це сторінки, які дозволяють використовувати спеціальні параметри в URL-адресі. Вони особливо корисні під час створення сторінок для динамічного вмісту.

Для блогу ви можете використовувати динамічний маршрут для створення URL-адрес на основі заголовків публікацій блогу. Цей підхід кращий, ніж створення компонента сторінки для кожної публікації.

Ви можете створити динамічні маршрути в Next.js, визначивши дві функції: getStaticProps і getStaticPaths.

Створення динамічного маршруту в Next.js

Щоб створити динамічний маршрут у Next.js, додайте до сторінки дужки. Наприклад, [params].js, [slug].js або [id].js.

Для блогу ви можете використовувати слаг для динамічного маршруту. Отже, якби публікація мала слаг dynamic-routes-nextjs, кінцева URL-адреса була б https://example.com/dynamic-routes-nextjs.

У папці pages створіть новий файл під назвою [slug].js і створіть компонент Post, який приймає дані публікації як проп.

const Post = ({ postData }) => {  return <div>{/* content */}</div>;};

Є різні способи, якими ви можете передати дані публікації в Post. Вибраний спосіб залежить від того, як ви хочете відобразити сторінку. Щоб отримати дані під час збирання, використовуйте getStaticProps(), а щоб отримати їх за запитом, використовуйте getServerSideProps().

Використання getStaticProps для отримання даних публікації

Повідомлення в блозі змінюються не так часто, і їх достатньо отримати під час створення. Отже, змініть компонент Post, щоб включити getStaticProps().

import { getSinglePost } from "../../utils/posts"; const Post = ({ content }) => {  return <div>{/* content */}</div>;}; export const getStaticProps = async ({ params }) => {    const post = await getSinglePost(params.slug);    return {      props: { ...post },    };  };

Функція getStaticProps генерує дані публікації, які відображаються на сторінці. Він використовує слаг із шляхів, згенерованих функцією getStaticPaths.

Використання getStaticPaths для отримання шляхів

Функція getStaticPaths() повертає шляхи до сторінок, які потрібно попередньо відобразити. Змініть компонент Post, щоб включити його:

export const getStaticPaths = async() => {  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } }));  return {    paths,    fallback: false,  };};

Ця реалізація getStaticPaths отримує всі публікації, які мають бути відтворені, і повертає слаги як параметри.

Загалом [slug].js виглядатиме так:

import { getAllPosts, getSinglePost } from "../../utils/posts"; const Post = ({ content }) => {  return <div>{content}</div>;}; export const getStaticPaths = async() => {  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } }));  return {    paths,    fallback: false,  };}; export const getStaticProps = async ({ params }) => {  const post = await getSinglePost(params.slug);   return {    props: { ...post },  };}; export default Post;

Ви повинні використовувати getStaticProps() і getStaticPaths() разом, щоб створити динамічний маршрут. Функція getStaticPaths() має генерувати динамічні маршрути, тоді як getStaticProps() отримує дані, відтворені на кожному маршруті.

Створення вкладених динамічних маршрутів у Next.js

Щоб створити вкладений маршрут у Next.js, вам потрібно створити нову папку в папці pages і зберегти динамічний маршрут у ній.

Наприклад, щоб створити /pages/posts/dynamic-routes-nextjs, збережіть [slug].js у /pages/posts.

Доступ до параметрів URL-адреси з динамічних маршрутів

Після створення маршруту ви можете отримати параметр URL -адреси з динамічного маршруту за допомогою хука useRouter() React.

Для pages/[slug].js отримайте слаг таким чином:

import { useRouter } from 'next/router' const Post = () => {  const router = useRouter()  const { slug } = router.query  return <p>Post: {slug}</p>} export default Post

Це відобразить слаг допису.

Динамічна маршрутизація за допомогою getServerSideProps

Використовуючи Next.js, ви можете отримувати дані під час збирання та створювати динамічні маршрути. Ви можете використовувати ці знання для попереднього візуалізації сторінок зі списку елементів.

Якщо ви хочете отримувати дані для кожного запиту, використовуйте getServerSideProps замість getStaticProps. Зауважте, що цей підхід є повільнішим; ви повинні використовувати його лише під час споживання даних, які регулярно змінюються.