[jsmastery.pro] The Ultimate Next.js 13 course

395

Next.js — это фреймворк

для разработки веб-приложений, построенных на базе JavaScript и React. Он предоставляет разработчикам инструменты и структуру для создания высокопроизводительных и масштабируемых приложений, работающих как на стороне сервера, так и на стороне клиента. Вот некоторые ключевые особенности и концепции Next.js:

  1. Рендеринг на стороне сервера (Server-Side Rendering, SSR)
  2. Статическая генерация (Static Site Generation, SSG)
  3. Разработка на клиентской стороне
  4. Роутинг
  5. Автоматическая оптимизация
  6. Поддержка CSS и стилей
  7. API маршруты
  8. Экосистема и плагины

На курсе мы создадим уникальное приложение — Современный клон StackOverflow
Приложение DevOverflow имеет:

  • Система рекомендаций для должностей (никто этому не учит)
  • Выборка данных из глобальной базы данных
  • Искусственный интеллект генерировал ответы на вопросы
  • Система бейджей и репутации
  • Мнения и механизм голосования
  • Фильтрация и разбивка на страницы практически для всех страниц и многое другое

Приступая к работе

  • Вступление
  • Предпосылки
  • То, что было раньше Next.js
  • Введение в Next.js
  • Как работает Веб
  • Настройка проекта (ESLint, Prettier, Git и Github)
  • Tailwind CSS
  • Архитектура кода

Маршрутизация, основные концепции и освоение пользовательского интерфейса

  • Маршрутизация
  • Архитектура ядра Next.js
  • Аутентификация
  • Авторизация
  • Множественные макеты и сгруппированные маршруты
  • Использование контекстного API в Next.js
  • Темная/светлая тема
  • Разработка отзывчивого пользовательского интерфейса главной страницы

Обработка форм, интеграция с бэкендом и базой данных

  • React Hook Form & Zod
  • Разработка пользовательского интерфейса страницы «Задать вопрос
  • Бэкэнд с Next.js
  • Интеграция с различными базами данных
  • Использование MongoDB
  • Изучение действий сервера
  • Реализация бэкенда для «Задать вопрос
  • Различные типы получения данных (SSG, ISR, SSR)
  • Интеграция вопросов на главную страницу

События в реальном времени и возможности сообщества

  • Крючки Webhooks
  • Отзывчивый пользовательский интерфейс страницы сообщества
  • Отзывчивый пользовательский интерфейс страницы тегов
  • Отзывчивый пользовательский интерфейс страницы с подробным описанием вопроса
  • Форма создания ответа
  • Реализация бэкенда для создания ответа
  • Отображение всех ответов
  • Разработка системы голосования для вопросов и ответов

Профили пользователей и взаимодействие с ними

  • Реализация бэкенда для функции «Сохранить вопрос»
  • Разработка и отображение сохраненных вопросов на странице коллекции
  • Реализация действия «Просмотр вопроса»
  • Реализация действий модели тегов
  • Разработка и отображение страницы сведений о теге
  • Отзывчивый пользовательский интерфейс страницы профиля
  • Реализация действий «Вопросы и ответы» на странице профиля
  • Создание формы редактирования вопроса
  • Удаление вопросов и ответов
  • Создание формы редактирования страницы профиля

Расширенные возможности и оптимизация

  • Реализация и интеграция Top Questions и Popular Tags
  • Реализация функциональности LocalSearchbar для всех страниц
  • Реализация функциональности фильтра для всех страниц
  • Реализация функциональности пагинации для всех страниц
  • Разработка функциональности «Глобальный поиск»
  • Реализация системы «Репутация»
  • Реализация системы «Значок»
  • Построение классического алгоритма «Рекомендуемые вопросы»
  • Интеграция «открытого ИИ» для автоматизации ответов
  • Управление ошибками и загрузкой
  • Использование сторонних API и разработка страницы «Найти работу»
  • SEO-оптимизация