Оглавление
Next.js
Фреймворк на React для сайтов и приложений: маршруты на файлах, серверные компоненты и данные.
1.Начало работы
- Что такое Next.jsЧто Next.js добавляет к React, когда он нужен и о какой версии этот курс.
- Создание проектаКак создать проект Next.js командой create-next-app, запустить его и что лежит в папках.
- Страницы и маршруты на файлахКак папки внутри app превращаются в адреса сайта и что такое файл page.tsx.
- Макеты и корневой макетКак вынести общую шапку и подвал в layout.tsx и сделать отдельный макет для раздела.
- Навигация: Link и useRouterКак делать ссылки между страницами компонентом Link и переходить из кода через useRouter.
2.Маршруты
- Динамические маршрутыКак сделать одну страницу для многих адресов через папку [slug] и прочитать параметр params.
- Вложенные маршрутыКак строить адреса из нескольких сегментов, читать параметры родительских папок и сочетать обычные и динамические папки.
- Группы маршрутов и приватные папкиКак группировать страницы папками в круглых скобках, давать группе свой макет и прятать служебные папки.
- Специальные файлы и страница 404Какие ещё файлы, кроме page и layout, понимает Next.js, и как показать свою страницу 404 через not-found.tsx и notFound().
3.Компоненты и данные
- Серверные и клиентские компонентыГде выполняется компонент в App Router, что делает директива use client и как сочетать оба вида компонентов.
- Загрузка данных в серверных компонентахКак получать данные прямо в серверном компоненте через await: из своих функций и из внешнего API через fetch.
- Кеширование и обновление данныхЧто Next.js 16 кеширует по умолчанию, как включить кеш для fetch и как обновить данные через revalidate, revalidatePath, revalidateTag и updateTag.
- Статическая и динамическая отрисовкаКогда Next.js готовит страницу при сборке, а когда на каждый запрос, и как заранее собрать страницы статей через generateStaticParams.
- Загрузка и потоковая отрисовкаКак показать заглушку, пока страница загружает данные: файл loading.tsx и компонент Suspense.
- Cache Components и use cacheНовая модель кеширования Next.js 16: настройка cacheComponents, директива use cache, функции cacheLife и cacheTag.
4.Формы, API и база данных
- Серверные действия для формКак обработать отправку формы функцией на сервере с директивой use server, без отдельного API.
- Проверка формы и вывод ошибокКак проверить данные в серверном действии и показать ошибки под полями с помощью хука useActionState.
- Обработчики маршрутов: свой APIКак сделать API в Next.js файлом route.ts: методы GET и POST, параметры адреса и ответ в JSON.
- Подключение базы данныхКак хранить статьи и комментарии в SQLite через Drizzle ORM: схема, создание таблиц и запросы.
5.Оформление и SEO
- Метаданные и SEOКак задать заголовок вкладки, описание и данные для соцсетей через metadata и generateMetadata.
- Картинки и next/imageКак показывать изображения компонентом Image: размеры, картинки из public, внешние адреса и заполнение блока.
- Шрифты и next/fontКак подключить шрифт Google Fonts или свой файл шрифта через next/font без запросов к чужим серверам.
- Глобальные стили и CSS-модулиГде писать общие стили сайта и как дать компоненту собственные классы, которые не пересекаются с другими.
- Tailwind CSSКак оформлять компоненты готовыми классами Tailwind CSS в проекте Next.js и как настроить свои цвета.
6.Готовое приложение
- Переменные окруженияКак хранить настройки и секреты в файлах .env, читать их через process.env и что делает приставка NEXT_PUBLIC_.
- Proxy: код до обработки запросаКак выполнить код до отрисовки страницы: файл proxy.ts, перенаправления, заголовки и настройка matcher.
- Авторизация: обзорКак устроен вход на сайт в Next.js: сессия в куке, функция cookies(), проверка прав в серверном действии и когда брать Auth.js.
- Несколько языков: обзорКак сделать сайт на нескольких языках в App Router: сегмент [lang], словари, выбор языка в proxy.ts и библиотека next-intl.
- Обработка ошибокКак показать понятную страницу при сбое: файлы error.tsx и global-error.tsx, кнопка повтора и ожидаемые ошибки в действиях.
- Тестирование: основыКак проверять приложение Next.js автоматически: модульные тесты компонентов в Vitest и сквозные тесты страниц в Playwright.
- Сборка и публикацияКак собрать проект командой next build, запустить его на своём сервере, опубликовать на Vercel или выгрузить как статический сайт.