Next.js 15 Tutorial - 5 - Routing

Введение в маршрутизацию в Next.js

Основные концепции маршрутизации

• Next.js использует файловую систему для маршрутизации, где URL-адреса определяются структурой папок и файлов в коде.

• При создании нового проекта с помощью команды npx create-next-app создается структура, которая будет использоваться для маршрутов.

• Важно помнить три основных правила:

• Все маршруты должны находиться внутри папки app.

• Файлы маршрутов должны называться page.js или page.tsx, в зависимости от использования TypeScript.

• Каждая папка представляет сегмент пути URL.

Создание домашней страницы

• Для создания главной страницы необходимо создать файл page.tsx внутри папки app, который будет экспортировать простой React-компонент.

• Запустите команду npm run dev, чтобы начать сервер разработки, и перейдите на localhost:3000, чтобы увидеть сообщение "Welcome Home".

Автоматическое создание файла layout.tsx

• Файл layout.tsx автоматически создается при первом доступе к корневому маршруту, даже если он был удален ранее.

Создание дополнительных маршрутов

Добавление страниц "О нас" и "Профиль"

• Для создания новых страниц (о нас и профиль), выполните следующие шаги:

• Создайте новую папку about внутри папки app.

• Внутри этой папки создайте файл page.tsx, который экспортирует компонент с заголовком "About Me".

• Аналогично создайте папку profile и файл page.tsx, который будет содержать заголовок "My Profile".

Проверка созданных страниц

• После сохранения файлов вы сможете перейти по адресам localhost:3000/about и localhost:3000/profile для просмотра соответствующих страниц.

Обработка несуществующих маршрутов

Ответы на неверные URL

• Если пользователь попытается получить доступ к несуществующему URL (например, /dashboard), Next.js автоматически вернет ответ 404 без необходимости писать дополнительный код для обработки таких случаев.

Преимущества системы маршрутизации