Введение/Начало работы

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

Добро пожаловать в документацию Next.js!

В этом разделе Начало работы вы узнаете, как создать своё первое приложение Next.js и познакомитесь с основными функциями, которые используются в каждом проекте.

Необходимые знания

Наша документация предполагает базовое знакомство с веб-разработкой. Перед началом работы желательно иметь представление о:

  • HTML
  • CSS
  • JavaScript
  • React

Если вы новичок в React или хотите освежить знания, рекомендуем начать с нашего курса по основам React и курса по основам Next.js, где вы будете учиться, параллельно создавая приложение.

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

Установка

Создайте новое приложение Next.js с помощью CLI `create-next-app`, а также настройте TypeScript, ESLint и алиасы путей модулей.

Структура проекта

Обзор соглашений о папках и файлах в Next.js, а также рекомендации по организации проекта.

Макеты и страницы

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

Связывание и навигация

Узнайте, как работают предварительная загрузка (prefetching), предварительный рендеринг (prerendering) и клиентская навигация в Next.js, а также как использовать компонент Link.

Изображения

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

Шрифты

Узнайте, как использовать шрифты в Next.js

CSS

Узнайте о различных способах добавления CSS в ваше приложение, включая CSS Modules, Global CSS, Tailwind CSS и другие методы.

Серверные и клиентские компоненты

Узнайте, как использовать серверные (Server) и клиентские (Client) компоненты React для рендеринга частей приложения на сервере или клиенте.

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

Начните получать данные и использовать потоковую передачу контента в вашем приложении.

Кэширование и ревалидация

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

Обновление данных

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

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

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

Partial Prerendering

Узнайте, как сочетать преимущества статического и динамического рендеринга с помощью частичного предварительного рендеринга (PPR).

Метаданные и OG-изображения

Узнайте, как добавлять метаданные на страницы и создавать динамические OG-изображения.

Развертывание

Узнайте, как развернуть ваше приложение Next.js.

Обновление

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