Динамическая маршрутизация в Next.js 13

В Next.js 13 динамическая маршрутизация немного отличается от предыдущих версий. Вместо использования подхода маршрутизации на основе файлов Next.js 13 представил новый способ обработки динамических маршрутов с использованием модулей next/link и next/router.

    import { useRouter } from 'next/router';
import Link from 'next/link';

const SlugPage = () => {
  const router = useRouter();
  const { slug } = router.query; // Access the slug parameter from the router

  // Assuming you have an array of animals
  const animals = [
    { Name: 'Lion', Info: 'The king of the jungle', Link: '/lion' },
    { Name: 'Tiger', Info: 'A majestic big cat', Link: '/tiger' },
    // Other animal objects
  ];

  // Filter the array based on the current slug
  const filteredAnimals = animals.filter(
    (animal) => animal.Link === `/${slug}`
  );

  return (
    <div>
      {filteredAnimals.map((animal, index) => (
        <div key = {index}>
          <Link href = {animal.Link}>
            <a>
              <p>Name: {animal.Name}</p>
              <p>Info: {animal.Info}</p>
            </a>
          </Link>
        </div>
      ))}
    </div>
  );
};

export default SlugPage;

С помощью Next 13 вы можете получить параметры с помощью крючка useSearchParams, предоставленного рядом, для поиска по параметрам.

useSearchParams — это хук клиентского компонента, который позволяет вам прочитать строку запроса текущего URL.
useSearchParams возвращает доступную только для чтения версию URLSearchParams inter

пример:

'use client'

import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
 
  const search = searchParams.get('search')
 
  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</>
}

Обратите внимание, что useSearchParams — это хук клиентского компонента, поэтому вы должны быть в контексте клиентского компонента, который вам может понадобиться включить 'use client' в начало вашего файла.

Я смог решить это. В приведенном ниже коде метод find ищет объект животного, где свойство Link соответствует значению /animals/${params.slug}.

Вот пример объекта в массиве:

  {
    "Name": "Lion",
    "Info": "Lions live to be 15 years old.",
    "Link": "/animals/lion"
  },

И вот как я динамически нахожу животное:

import { animals } from '@/components/AnimalData';
    
    export default function Animals({ params }) {
      const animal = animals.find(animal => animal.Link === `/animals/${params.slug}`);
    
      return (
        <div>
          {animal ? (
            <div>
              <p>Animal: {animal.Name}</p>
              <p>Info: {animal.Info}</p>
            </div>
          ) : (
            <p>Animal not found</p>
          )}
        </div>
      );
    }