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

Поздравляем! Вы здесь, потому что готовы развернуть свое Next.js приложение. На этой странице показано, как выполнить развертывание с использованием управляемого или самостоятельного хостинга через Next.js Build API.

Next.js Build API

next build генерирует оптимизированную версию вашего приложения для продакшена. Этот стандартный вывод включает:

HTML-файлы для страниц, использующих getStaticProps или Автоматическую статическую оптимизацию
CSS-файлы для глобальных стилей или индивидуально ограниченных стилей
JavaScript для предварительного рендеринга динамического контента с сервера Next.js
JavaScript для интерактивности на стороне клиента через React

Этот вывод генерируется внутри папки .next:

.next/static/chunks/pages – Каждый JavaScript-файл в этой папке соответствует маршруту с тем же именем. Например, .next/static/chunks/pages/about.js будет JavaScript-файлом, загружаемым при просмотре маршрута /about в вашем приложении
.next/static/media – Статически импортированные изображения из next/image хешируются и копируются сюда
.next/static/css – Глобальные CSS-файлы для всех страниц вашего приложения
.next/server/pages – HTML и JavaScript точки входа, предварительно отрендеренные с сервера. Файлы .nft.json создаются при включенной Трассировке выходных файлов и содержат все пути файлов, зависящие от данной страницы.
.next/server/chunks – Общие JavaScript-чанки, используемые в нескольких местах вашего приложения
.next/cache – Вывод для кэша сборки и кэшированных изображений, ответов и страниц с сервера Next.js. Использование кэша помогает сократить время сборки и улучшить производительность загрузки изображений

Весь JavaScript-код внутри .next скомпилирован, а бандлы для браузеров минифицированы для достижения наилучшей производительности и поддержки всех современных браузеров.

Управляемый Next.js с Vercel

Vercel – это самый быстрый способ развернуть ваше Next.js приложение с нулевой конфигурацией.

При развертывании на Vercel платформа автоматически определяет Next.js, запускает next build и оптимизирует вывод сборки для вас, включая:

Сохранение кэшированных ресурсов между развертываниями, если они не изменены
Неизменяемые развертывания с уникальным URL для каждого коммита
Страницы автоматически статически оптимизируются, если это возможно
Ресурсы (JavaScript, CSS, изображения, шрифты) сжимаются и обслуживаются из Глобальной Edge-сети
API-маршруты автоматически оптимизируются как изолированные Serverless-функции, которые могут масштабироваться бесконечно
Middleware автоматически оптимизируется как Edge-функции, которые не имеют холодного старта и запускаются мгновенно

Кроме того, Vercel предоставляет такие функции, как:

Автоматический мониторинг производительности с Next.js Speed Insights
Автоматический HTTPS и SSL-сертификаты
Автоматический CI/CD (через GitHub, GitLab, Bitbucket и т.д.)
Поддержка Переменных окружения
Поддержка Пользовательских доменов
Поддержка Оптимизации изображений с next/image
Мгновенные глобальные развертывания через git push

Разверните Next.js приложение на Vercel бесплатно, чтобы попробовать.

Самостоятельный хостинг

Вы можете самостоятельно размещать Next.js с поддержкой всех функций, используя Node.js или Docker. Также можно выполнить статический экспорт HTML, который имеет некоторые ограничения.

Сервер Node.js

Next.js можно развернуть на любом хостинг-провайдере, поддерживающем Node.js. Например, AWS EC2 или DigitalOcean Droplet.

Сначала убедитесь, что ваш package.json содержит скрипты "build" и "start":

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Затем выполните npm run build для сборки вашего приложения. Наконец, выполните npm run start для запуска сервера Node.js. Этот сервер поддерживает все функции Next.js.

Если вы используете next/image, рассмотрите возможность добавления sharp для более производительной Оптимизации изображений в вашей продакшен-среде, выполнив npm install sharp в директории проекта. На Linux-платформах sharp может потребовать дополнительной настройки для предотвращения чрезмерного использования памяти.

Docker-образ

Next.js можно развернуть на любом хостинг-провайдере, поддерживающем контейнеры Docker. Этот подход можно использовать при развертывании в оркестраторах контейнеров, таких как Kubernetes или HashiCorp Nomad, или при запуске на одном узле в любом облачном провайдере.

Установите Docker на вашу машину
Клонируйте пример with-docker
Соберите ваш контейнер: docker build -t nextjs-docker .
Запустите ваш контейнер: docker run -p 3000:3000 nextjs-docker

Если вам нужно использовать разные переменные окружения в нескольких средах, ознакомьтесь с нашим примером with-docker-multi-env.

Статический экспорт HTML

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

Другие сервисы

Следующие сервисы поддерживают Next.js v12+. Ниже вы найдете примеры или руководства по развертыванию Next.js на каждом сервисе.

Управляемый сервер

Полезно знать: Существуют также управляемые платформы, которые позволяют использовать Dockerfile, как показано в примере выше.

Только статический экспорт

Следующие сервисы поддерживают развертывание Next.js только с использованием output: 'export'.

GitHub Pages

Вы также можете вручную развернуть вывод из output: 'export' на любой статический хостинг, часто через ваш CI/CD-пайплайн, такой как GitHub Actions, Jenkins, AWS CodeBuild, Circle CI, Azure Pipelines и другие.

Serverless

Полезно знать: Не все serverless-провайдеры реализуют Next.js Build API из next start. Пожалуйста, уточните у провайдера, какие функции поддерживаются.

Автоматические обновления

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

Next.js автоматически загрузит последнюю версию вашего приложения в фоновом режиме при маршрутизации. Для клиентской навигации next/link временно будет функционировать как обычный тег <a>.

Полезно знать: Если новая страница (со старой версией) уже была предварительно загружена через next/link, Next.js использует старую версию. Переход на страницу, которая не была предварительно загружена (и не закэширована на уровне CDN), загрузит последнюю версию.

Ручное корректное завершение работы

При самостоятельном хостинге вам может понадобиться выполнить код при завершении работы сервера по сигналам SIGTERM или SIGINT.

Вы можете установить переменную окружения NEXT_MANUAL_SIG_HANDLE в true, а затем зарегистрировать обработчик для этого сигнала внутри вашего файла _document.js. Вам нужно будет зарегистрировать переменную окружения непосредственно в скрипте package.json, а не в файле .env.

Полезно знать: Ручная обработка сигналов недоступна в next dev.

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}

pages/_document.js

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // это должно быть добавлено в ваш кастомный _document
  process.on('SIGTERM', () => {
    console.log('Получен SIGTERM: ', 'очистка')
    process.exit(0)
  })

  process.on('SIGINT', () => {
    console.log('Получен SIGINT: ', 'очистка')
    process.exit(0)
  })
}