Next.js, описанный как «React фреймворк для продакшена», упрощает создание высокооптимизированных веб-приложений в React. Этот курс поможет вам изучить Next.js, разработав два примера: полностью статичный веб-сайт и гибридное (статическое + рендеринг на стороне сервера) приложение. Первый пример, личный веб-сайт блог, познакомит вас с фундаментальными концепциями Next.js, такими как предварительный рендеринг, маршрутизация на основе файловой системы и гидратация.
Он покажет вам, как загружать данные на страницы, которые статически генерируются во время сборки, и как стилизовать ваши страницы в глобальных файлах CSS или с помощью библиотеки styled-jsx, которая предоставляет стили для компонентов.
В разделе «Развертывание» представлены все варианты запуска вашего приложения в производственной среде, от полностью управляемых бессерверных платформ, таких как Vercel, до настройки собственных серверов Linux.
Второй пример, который вы разработаете, — это веб-сайт магазина. Это будет более сложное приложение, которое загружает свои данные из Headless CMS (Strapi) и использует расширенные функции Next.js, такие как инкрементная статическая регенерация, для автоматического отражения изменений в бэкэнд-данных.
Проект покажет вам, как включить поддержку TypeScript в проекте Next.js, если вы хотите это сделать. Использование TypeScript необязательно; во всех видео, кроме одного, используется простой JavaScript. Но вы найдете полный код TypeScript для примера магазина в репозитории GitHub, если предпочитаете TypeScript.
Веб-сайт будет использовать популярную библиотеку CSS Tailwind для стилизации и компонент Next Image для оптимизации изображений.
Вы увидите различные способы загрузки данных из внешнего API, в том числе написание собственных маршрутов API в Next.js, а также способы выбора наилучшего подхода для ваших конкретных требований.
Пример будет включать безопасную систему аутентификации на основе JWT и файлов cookie, а для кэширования данных на стороне клиента будет использоваться библиотека React Query.
Предоставляется полный исходный код для всех примеров с простым способом просмотра изменений, внесенных в каждую лекцию.
Курс можно продолжить с последней версией Next.js 13. Обратите внимание, что экспериментальные функции, такие как каталог бета-приложений, не рассматриваются.
