Роутинг в Next.js: Динамические страницы и хук useParams | App Router на практике

📚 Введение: Маршрутизация на основе файловой системы

В Next.js создание страниц и навигация между ними — фундаментальная часть фреймворка, которая работает "из коробки". В отличие от традиционного подхода в React, здесь не требуются внешние библиотеки, такие как react-router-dom.

Система маршрутизации построена на простой и интуитивной идее: структура папок в директории app напрямую определяет URL-адреса приложения.

1. Основы: Создание статической страницы

Создание базовой страницы в Next.js подчиняется одному простому и элегантному правилу.

1.1. 🛠 Пошаговое руководство

Рассмотрим процесс создания страницы, доступной по адресу /apple:

1. Создайте папку: Внутри директории app создайте новую папку. Ее название станет URL-сегментом.

• Пример: app/apple

2. Создайте файл компонента: Внутри только что созданной папки (apple) создайте файл с обязательным именем page.tsx. Этот файл будет определять пользовательский интерфейс (UI) вашей страницы.

• Пример: app/apple/page.tsx

3. Экспортируйте компонент по умолчанию: В файле page.tsx напишите стандартный React-компонент и экспортируйте его по умолчанию (export default). Обратите внимание: название самой функции-компонента (например, ApplePage) не имеет значения для маршрутизации, важен именно export default.

1.2. 🔧 Минимальный код для page.tsx

Вот минимально необходимый код для файла app/apple/page.tsx:

import styles from "../page.module.css"
 
export default function Home() {
  return (
    <div className={styles.page}>
      <main className={styles.main}>APPLE PAGE</main>
    </div>
  )
}

2. Вложенные маршруты 📂

Next.js позволяет легко создавать более сложные URL-структуры, такие как /apple/orange, просто вкладывая папки друг в друга.

2.1. Принцип вложенности

Здесь все так же интуитивно: вложение папок в директории app напрямую создает вложенные URL-адреса в браузере.

2.2. Пример структуры 🗂️

Для создания страницы по адресу /apple/orange структура папок будет выглядеть следующим образом:

3. Динамические маршруты: Страницы для уникальных данных 🌀

Статические страницы отлично подходят для разделов вроде "О нас" или "Контакты". Но что делать, если вашему приложению нужно отображать тысячи страниц товаров или профилей пользователей? Создавать их вручную невозможно. Здесь на помощь приходит самая мощная возможность маршрутизатора Next.js — динамические маршруты.

3.1. Проблема: Масштабирование 📈

Представьте, что вам нужно создать страницу профиля для каждого пользователя вашего приложения. Создавать вручную папки /profile/1, /profile/2, /profile/3 и так далее — невозможно и неэффективно. Именно для таких задач и существуют динамические маршруты. Они позволяют создать один шаблон страницы, который будет отображать уникальные данные в зависимости от URL.

3.2. Решение: Синтаксис квадратных скобок [] 🔄

Чтобы создать динамический сегмент URL, нужно назвать папку, обернув ее имя в квадратные скобки. Это превращает имя папки в параметр.

• Пример: Папка с именем app/profile/[id] будет обрабатывать любые адреса, соответствующие этому шаблону: /profile/1, /profile/27, /profile/user-abc и так далее. Часть URL, соответствующая [id], становится динамическим параметром.

3.3. Как получить динамический параметр внутри компонента 🔍

Чтобы получить значение из URL (например, 27 из адреса /profile/27) внутри компонента, нужно выполнить следующие шаги:

Шаг 1: Хук useParams В Next.js для чтения параметров из URL используется специальный хук useParams, который импортируется из next/navigation.

Шаг 2: Директива 'use client' ⚡ Это критически важный момент. Хуки, такие как useState, useEffect и useParams, а также обработчики событий (onClick) работают только в клиентских компонентах. По умолчанию все компоненты в app являются серверными. Чтобы превратить компонент в клиентский, необходимо добавить директиву 'use client' в самое начало файла page.tsx.

Шаг 3: Пример кода Вот как выглядит файл app/profile/[id]/page.tsx, который получает и отображает ID пользователя из URL:

// 1. Обязательная директива для использования хуков.
// Превращает компонент из серверного (по умолчанию) в клиентский.
"use client"
 
import { useParams } from "next/navigation"
 
export default function Home() {
  // 2. Вызываем хук, чтобы получить доступ к динамическим параметрам URL.
  // Для URL /profile/123, params будет { id: '123' }
  const params = useParams()
 
  return (
    <div className={styles.page}>
      <main className={styles.main}>Profile {params.slug}</main>
    </div>
  )
}

3.4. Серверные vs. Клиентские компоненты: Важное различие ⚙️

Владение этими тремя типами маршрутизации является основой для создания любого приложения на Next.js.

4. Итоги: Шпаргалка по маршрутизации 📋

Эта таблица объединяет все ключевые концепции маршрутизации в Next.js (App Router).