Глава 1: Введение в Next.js

• Что такое Next.js?
  • Обзор Next.js и его возможностей.
  • Почему стоит выбрать Next.js среди других фреймворков?
  • Реальные применения Next.js.
• Предварительные требования
  • Базовые знания JavaScript, React и Node.js.
  • Необходимое программное обеспечение (Node.js, npm/yarn).
  • Настройка среды разработки (VS Code или любой другой предпочитаемый редактор).

Глава 2. Настройка проекта Next.js

• Установка Next.js
  • Создание нового проекта Next.js с помощью npx create-next-app.
  • Обзор структуры каталога.
  • Использование TypeScript с Next.js.
• Понимание структуры файла
  • Каталог страниц и система маршрутизации.
  • Общественный каталог для статических ресурсов.
  • Каталог API для внутренних маршрутов.

Глава 3: Создание вашей первой страницы

• Создание страниц
  • Знакомство с папкой Pages.
  • Создание и связывание страниц.
  • Навигация между страницами с помощью кнопки «Далее/ссылка».
• Динамическая маршрутизация
  • Создание динамических маршрутов с помощью [param].
  • Вложенная маршрутизация и варианты ее использования.
• О предварительном рендеринге
  • Статическая генерация и рендеринг на стороне сервера.
  • Как использовать getStaticProps и getServerSideProps.

Глава 4. Стилизация в Next.js

• CSS-модули
  • Как использовать модули CSS для стилизации с ограниченной областью действия.
  • Управление глобальным CSS.
• Стилизованные компоненты
  • Настройка стилевых компонентов в Next.js.
  • Управление темами.
• Использование Sass с Next.js
  • Установка и настройка Sass.
  • Лучшие практики использования Sass в проекте Next.js.

Глава 5. Получение данных в Next.js

• Извлечение данных на стороне клиента
  • Использование fetch и axios для получения данных в компоненте.
• Извлечение данных на стороне сервера
  • Использование getServerSideProps для рендеринга на стороне сервера.
• Статическая выборка данных
  • Использование getStaticProps и getStaticPaths для генерации статики.
  • Инкрементная статическая регенерация (ISR) для динамического контента.

Глава 6: Маршруты API в Next.js

• Создание API-маршрутов
  • Обзор каталога API.
  • Создание простых RESTful API.
• Обработка запросов API
  • Понимание объектов запроса и ответа.
  • Обработка ошибок и коды ответов.

Глава 7. Использование Next.js с CMS

• Настройка CMS
  • Зачем использовать CMS с Next.js?
  • Интеграция с популярными вариантами CMS (WordPress, Contentful, Sanity и т. д.).
• Извлечение данных CMS в Next.js
  • Как подключить вашу CMS к Next.js.
  • Управление динамическим контентом с помощью CMS.

Глава 8: Next.js и аутентификация

• Реализация аутентификации
  • Стратегии аутентификации в Next.js.
  • Использование токенов JWT, файлов cookie и управления сеансами.
• Сторонняя аутентификация
  • Настройка поставщиков OAuth (Google, GitHub).
  • Использование таких библиотек, как NextAuth.js, для аутентификации.

Глава 9: Оптимизация производительности

• Оптимизация изображений
  • Использование компонента Next.js Image для оптимизации изображений.
  • Отложенная загрузка изображений.
• Оптимизация скриптов
  • Понимание компонента Next.js Script.
  • Отложенная и асинхронная загрузка скриптов.
• Разбиение кода и отложенная загрузка
  • Как Next.js автоматически обрабатывает разделение кода.
  • Реализация динамического импорта для повышения производительности.

Глава 10: SEO в Next.js

• Понимание SEO в Next.js
  • Важность SEO для приложений Next.js.
• Метатеги и открытый график
  • Использование next/head для SEO-тегов.
  • Настройка тегов Open Graph и Twitter Card.
• Создание файлов Sitemap и Robots.txt
  • Создание динамических файлов Sitemap.
  • Использование файла robots.txt для сканеров.

Глава 11: Развертывание Next.js

• Платформы развертывания
  • Vercel: рекомендуемая платформа для Next.js.
  • Другие платформы: AWS, Netlify и DigitalOcean.
• Развертывание в Vercel
  • Пошаговое руководство по развертыванию вашего приложения в Vercel.
• Настройка для производства
  • Переменные среды в Next.js.
  • Рекомендации по созданию готового к использованию приложения Next.js.

Глава 12: Расширенная конфигурация и персонализация

• Настройка конфигурации веб-пакета
  • Использование next.config.js для расширенной настройки.
  • Добавление пользовательских загрузчиков и плагинов Webpack.
• Пользовательский сервер
  • Когда использовать собственный сервер.
  • Реализация собственного сервера с помощью Express.

Глава 13: Управление состоянием в Next.js

• Введение в управление состоянием
  • Когда и зачем использовать управление состоянием в Next.js.
  • Варианты управления состоянием (React Context, Redux, Recoil, Zustand).
• Использование React Context API
  • Настройка глобального состояния с помощью React Context.
  • Передача состояния между компонентами.
• Интеграция Redux с Next.js
  • Настройка Redux с помощью Next.js.
  • Обработка состояния в средах на стороне сервера и на стороне клиента.

Глава 14. Тестирование в Next.js

• Зачем тестировать приложения Next.js?
  • Важность тестирования и различные виды тестирования.
  • Обзор инструментов тестирования (Jest, React Testing Library, Cypress).
• Юнит-тестирование с помощью Jest
  • Настройка Jest в проекте Next.js.
  • Написание модульных тестов для компонентов и служебных функций.
• Интеграционное тестирование с библиотекой тестирования React
  • Тестирование компонентов и страниц с помощью библиотеки тестирования React.
  • Имитация получения данных и вызовов API.

Заключение

• Заключительные мысли
  • Краткий обзор основных выводов.
  • Ресурсы для дальнейшего обучения.
  • Призываем читателей исследовать и экспериментировать с Next.js.

Для получения более подробной информации продолжайте путешествие здесь.