Глава 25. Роутинг и навигация в Next.js

Зачем эта глава

Навигация — это основа любого сайта. Next.js делает её удобной и быстрой.

Теория (коротко)

Next.js использует компонент Link для переходов между страницами.

Маршруты строятся по структуре папок.

JSX
import Link from "next/link";

export default function Nav() {
  return (
    <nav>
      <Link href="/">Главная</Link>
      <Link href="/about">О нас</Link>
    </nav>
  );
}
Подсказка: используйте Link, а не обычный <a> для внутренних ссылок.

Задания

Задание: меню

  • Создай меню с 2–3 ссылками.
  • Добавь страницу «Контакты».
  • Проверь работу переходов.

Проверка себя

Ты знаешь, как создавать маршруты и ссылки в Next.js.

Мини-проект

Цель: навигация для мини-сайта.

Требования: 3 страницы и активные ссылки.

Критерий готовности: навигация работает без перезагрузки.

Словарь главы

Link
Компонент для навигации между страницами.
Маршрут
Адрес страницы в Next.js.