Как реализовать динамическую маршрутизацию в next.js 14?

Question

Ян

nextjs , react , javascript , typescript

Как реализовать динамическую маршрутизацию в next.js 14?

Как я могу настроить динамическую маршрутизацию в приложении с использованием React, чтобы отображать посты по их id вместо простого списка на главной странице? У меня есть структура с компонентом в app/page.tsx, который отображает посты, и другими компонентами, отображающими их. Я пытаюсь создать динамические маршруты вида "/1", "/2", "/3" и так далее. В файле app/pages/[id].tsx я пытаюсь отобразить id поста, но получаю ошибку 404. Как можно решить эту проблему? В ссылках на посты я использую компонент Link, например, так: <Link href={`/[id]`} as={`/${post?.id}`}>
<Button text="Читать далее" />
</Link>. Я только учусь, просьба обратиться с пониманием.

1 февраля 2024 г. 1:08

Ответы на вопрос 1

Похожие вопросы

Answer 1

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

На момент моего знания (Cut-off date: 2023), в Next.js 14 принцип динамической маршрутизации не изменился с предыдущих версий.

1. Структура папок
   В вашем проекте Next.js создайте папку `pages`, если она уже не создана.

2. Динамические маршруты
   Внутри `pages`, создайте файл с именем в квадратных скобках, чтобы указать динамический параметр маршрута. Например:

   ```
   pages/
     [id].tsx
   ```

   Этот файл будет отвечать за обработку маршрута вроде `/1`, `/2`, `/3` и так далее.

3. Получение параметра внутри компонента
   Внутри файла `[id].tsx` используйте `useRouter` из `next/router` для получения параметра `id` из URL.

   Вот пример компонента:

   ```tsx
   import { useRouter } from 'next/router';

   const Post = () => {
     const router = useRouter();
     const { id } = router.query; // Получаем 'id' из маршрута

     return (
       <div>
         <h1>Post: {id}</h1>
         {/* Отобразить информацию о посте здесь */}
       </div>
     );
   };

   export default Post;
   ```

4. Использование Link для навигации
   В вашем главном компоненте `page.tsx`, используйте компонент `Link` из `next/link` для создания ссылок на динамические страницы. Пример ниже показывает, как это делается правильно:

   ```tsx
   import Link from 'next/link';

   const HomePage = ({ posts }) => {
     return (
       <div>
         {/* Предположим, что 'posts' - это массив объектов постов, каждый из которых имеет 'id' */}
         {posts.map((post) => (
           <div key={post.id}>
             <h2>{post.title}</h2>
             <Link href={`/posts/${post.id}`}>
               <a>Читать далее</a>
             </Link>
           </div>
         ))}
       </div>
     );
   };

   export default HomePage;
   ```

Обратите внимание, что я заменил `href` в `Link` с `/[id]` на `/posts/[id]`, так как использование префикса `posts` кажется более семантически правильным. Если вы хотите, чтобы ваши URL были именно в виде `"/1", "/2", "/3"`, то тогда ваш код должен работать правильно (по предоставленной вами информации).

Если вы все еще сталкиваетесь с ошибкой `404`, убедитесь, что:

- Компонент `Link` используется правильно.
- У вас нет опечаток в именах папок и файлах.
- Ваш Next.js сервер был перезапущен (если вы только что создали файлы и папки).
- Страницы динамически импортируются, если используются нестандартные пути; в Next.js 14 их нужно импортировать в `_app.tsx` или `pages.tsx`, чтобы они корректно отображались на роутах.

Если вы делаете все правильно, но ошибка непонятно почему происходит, попробуйте проверить консоль разработч