Перейти к содержанию

Обучающие курсы Next.js

Пройдите путь от новичка до эксперта, изучив основы Next.js и создав полнофункциональный демонстрационный сайт, использующий все новейшие возможности.

  • Изучаем app router в Next.js: 16 глав, в которых вы пройдете путь от React до Next.js.
  • Основы React: Новичок в React? Узнайте об основных концепциях, которые помогут вам перейти от JavaScript к React.
  • Next.js Pages Router: Узнайте, как создать статический блог с помощью Pages Router.

Как проходит курс?

Построение полноценного веб-приложения. Шаг за шагом.

Объяснительная по курсу

  • Настройте локальное окружение и инициализируйте шаблон проекта Next.js «ACME».
  • Используйте готовые компоненты в каждой главе, которые используют соглашения и шаблоны Next.js.
  • Подключите реальную логику приложения и данные, чтобы воплотить в жизнь полноценный демо-сайт.
  • В конце вы получите готовый к запуску сайт и знания, необходимые для создания и развертывания собственного.

Что я узнаю?

Вот все, что будет изучаться в курсе.

  • Введение

    Узнайте, как создать веб-приложение full-stack с помощью бесплатного курса Next.js Foundations.

  • Начало работы

    Создайте новое приложение Next.js с помощью стартового примера дашборда и изучите проект.

  • Стилизация CSS

    Оформите свое приложение Next.js с помощью модулей Tailwind и CSS.

  • Оптимизация шрифтов и изображений

    Оптимизируйте шрифты и изображения с помощью встроенных компонентов Next.js.

  • Создание макетов и страниц

    Создайте маршруты дашборда и общий макет, который можно использовать на нескольких страницах.

  • Навигация между страницами

    Узнайте, как использовать компонент <Link> для навигации между страницами.

  • Настройка базы данных

    Создайте базу данных для своего приложения и загрузите в нее исходные данные.

  • Получение данных

    Узнайте о различных способах получения данных в Next.js и получите данные для страницы приборной панели с помощью серверных компонентов.

  • Статический и динамический рендеринг

    Узнайте, как работает рендеринг в Next.js, и сделайте свое приложение для дашборда динамичным.

  • Потоковая передача

    Улучшите загрузку вашего приложения с помощью потоковой передачи и загрузочных скелетов.

  • Частичный рендеринг

    Первый взгляд на Partial Prerendering и его работу.

  • Добавление поиска и пагинации

    Добавление поиска и пагинации в приложение дашборда с помощью API Next.js.

  • Мутация данных

    Вносите изменения в данные с помощью React Server Actions и перепроверяйте кэш Next.js.

  • Обработка ошибок

    Изящно обрабатывайте ошибки с помощью error.tsx и notFound.

  • Улучшение доступности

    Реализуйте валидацию форм на стороне сервера и улучшите доступность ваших форм.

  • Добавление аутентификации

    Добавьте аутентификацию для защиты маршрутов дашборда с помощью NextAuth.js, серверных действий и Middleware.

  • Добавление метаданных

    Узнайте, как добавить метаданные в приложение Next.js.

  • Следующие шаги

    Заключение курса Дашборд Next.js

Комментарии