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

[pineapple]

Ссылка на картинку

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-оптимизация

Читать далее...