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

Поздравляем, пришло время развернуть приложение в производство.

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

Сборки для производства

Запуск next build генерирует оптимизированную версию вашего приложения для производства. Файлы HTML, CSS и JavaScript создаются на основе ваших страниц. JavaScript компилируется, а пакеты браузера минимизируются с помощью компилятора Next.js, чтобы обеспечить лучшую производительность и поддержку всех современных браузеров.

Next.js генерирует стандартный выходной файл для развертывания, используемый как управляемыми, так и саморазвёртываемыми приложениями Next.js. Это гарантирует поддержку всех функций в обоих методах развертывания. В следующей основной версии мы преобразуем этот выходной файл в спецификацию нашего API спецификации выходных данных сборки.

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

Vercel, создатели и поддерживающие Next.js, предоставляют управляемую инфраструктуру и платформу для разработчиков для ваших приложений Next.js.

Развертывание на Vercel не требует конфигурации и обеспечивает дополнительные возможности масштабирования, доступности и производительности по всему миру. Тем не менее, все функции Next.js по-прежнему поддерживаются при самостоятельном размещении.

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

Самостоятельное размещение

Вы можете самостоятельно разместить Next.js тремя различными способами:

• Сервер Node.js
• Контейнер Docker
• Статический экспорт

Сервер Node.js

Next.js можно развернуть на любом хостинге, поддерживающем Node.js. Убедитесь, что ваш package.json содержит скрипты "build" и "start".

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

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

Контейнер Docker

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

1. Установите Docker на вашем компьютере
2. Скопируйте наш пример (или пример с несколькими средами)
3. Соберите контейнер: docker build -t nextjs-docker .
4. Запустите контейнер: docker run -p 3000:3000 nextjs-docker

Next.js через Docker поддерживает все функции Next.js.

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

Next.js позволяет начать как статический сайт или одностраничное приложение (SPA), а затем, при необходимости, улучшить его, используя функции, требующие сервера.

Поскольку Next.js поддерживает этот статический экспорт, его можно развернуть и разместить на любом веб-сервере, который может обслуживать статические ресурсы HTML/CSS/JS. Это включает инструменты, такие как AWS S3, Nginx или Apache.

Запуск в виде статического экспорта не поддерживает функции Next.js, которые требуют сервера. Подробнее.

Важно знать:

• Компоненты сервера поддерживаются при статическом экспорте.

Функции

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

Оптимизация изображений с помощью next/image работает в режиме самообслуживания без конфигурации при развертывании с помощью next start. Если вы предпочитаете использовать отдельный сервис для оптимизации изображений, вы можете настроить загрузчик изображений.

Оптимизация изображений может быть использована со статическим экспортом путём определения пользовательского загрузчика изображений в next.config.js. Обратите внимание, что изображения оптимизируются во время выполнения, а не во время сборки.

Важно знать:

• При самостоятельном размещении рассмотрите установку sharp для более производительной оптимизации изображений в вашей производственной среде, запустив npm install sharp в каталоге вашего проекта. На платформах Linux sharp может потребовать дополнительной конфигурации, чтобы предотвратить чрезмерное использование памяти.
• Узнайте больше о поведении кэширования оптимизированных изображений и о том, как настроить TTL.
• Вы также можете отключить оптимизацию изображений и сохранить другие преимущества использования next/image если вы предпочитаете. Например, если вы оптимизируете изображения самостоятельно отдельно.

Промежуточное ПО

Промежуточное ПО работает в режиме самообслуживания без конфигурации при развертывании с помощью next start. Поскольку оно требует доступа к входящему запросу, оно не поддерживается при использовании статического экспорта.

Промежуточное ПО использует среду выполнения, которая является подмножеством всех доступных API Node.js, чтобы обеспечить низкую задержку, поскольку оно может работать перед каждой маршрутизацией или ресурсом в вашем приложении. Эта среда выполнения не требует работы «на границе» и работает на сервере в одном регионе. Для работы промежуточного ПО в нескольких регионах требуется дополнительная настройка и инфраструктура.

Если вы хотите добавить логику (или использовать внешний пакет), которая требует всех API Node.js, вы можете перенести эту логику в макет в качестве компонента сервера. Например, проверка заголовков и перенаправление. Вы также можете использовать заголовки, куки или параметры запроса для перенаправления или переписывания через next.config.js. Если это не работает, вы также можете использовать собственный сервер.

Переменные среды

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

По умолчанию переменные среды доступны только на сервере. Чтобы сделать переменную среды доступной в браузере, она должна иметь префикс NEXT_PUBLIC_. Однако эти публичные переменные среды будут встроены в пакет JavaScript во время next build.

Для чтения переменных среды во время выполнения рекомендуется использовать getServerSideProps или постепенный переход на App Router. С App Router мы можем безопасно читать переменные среды на сервере во время динамического рендеринга. Это позволяет использовать единый Docker-образ, который можно продвигать через несколько сред с различными значениями.

import { unstable_noStore as noStore } from 'next/cache';
 
export default function Component() {
  noStore();
  // cookies(), headers(), and other dynamic functions
  // will also opt into dynamic rendering, making
  // this env variable is evaluated at runtime
  const value = process.env.MY_VALUE
  ...
}

Важно знать:

• Вы можете выполнить код при запуске сервера, используя функцию register.
• Мы не рекомендуем использовать параметр runtimeConfig, так как он не работает в режиме автономного вывода. Вместо этого мы рекомендуем постепенно переходить на App Router.

Кэширование и ISR

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

Кэширование и перепроверка страниц (с использованием Incremental Static Regeneration (ISR) или новых функций в App Router) используют общий кэш. По умолчанию этот кэш хранится в файловой системе (на диске) на вашем сервере Next.js. Это работает автоматически при самостоятельном размещении с помощью как Pages, так и App Router.

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

Автоматическое кэширование

• Next.js устанавливает заголовок Cache-Control для public, max-age=31536000, immutable в виде действительно неизменяемых ресурсов. Его нельзя перезаписать. Эти неизменяемые файлы содержат SHA-хеш в имени файла, поэтому их можно безопасно кэшировать неопределённо долго. Например, Статические импорты изображений. Вы можете настроить время жизни кэша для изображений.
• Инкрементальное статическое восстановление (ISR) устанавливает заголовок Cache-Control для s-maxage: <revalidate in getStaticProps>, stale-while-revalidate. Это время перепроверки определено в вашей функции getStaticProps в секундах. Если вы установите revalidate: false, по умолчанию будет установлено время кэширования в один год.
• Динамически отрисованные страницы устанавливают заголовок Cache-Control для private, no-cache, no-store, max-age=0, must-revalidate, чтобы предотвратить кэширование данных, специфичных для пользователя. Это относится как к роутеру приложения, так и к роутеру страниц. Это также включает Режим черновика.

Статические ресурсы

Если вы хотите разместить статические ресурсы на другом домене или CDN, вы можете использовать конфигурацию assetPrefix настройки в next.config.js. Next.js будет использовать этот префикс ресурса при получении файлов JavaScript или CSS. Разделение ресурсов на другой домен влечёт за собой дополнительные затраты времени на разрешение DNS и TLS.

Узнайте больше о assetPrefix.

Настройка кэширования

По умолчанию сгенерированные кэшированные ресурсы будут храниться в памяти (по умолчанию 50 МБ) и на диске. Если вы размещаете Next.js с помощью платформы оркестрации контейнеров, такой как Kubernetes, каждый pod будет иметь копию кэша. Чтобы предотвратить отображение устаревших данных, поскольку кэш по умолчанию не разделяют между pods, вы можете настроить кэш Next.js для предоставления обработчика кэша и отключить кэширование в памяти.

Для настройки расположения кэша ISR/данных при самохостинге вы можете настроить пользовательский обработчик в вашем файле next.config.js.

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // disable default in-memory caching
}

Затем создайте cache-handler.js в корне вашего проекта, например:

const cache = new Map()
 
module.exports = class CacheHandler {
  constructor(options) {
    this.options = options
  }
 
  async get(key) {
    // This could be stored anywhere, like durable storage
    return cache.get(key)
  }
 
  async set(key, data, ctx) {
    // This could be stored anywhere, like durable storage
    cache.set(key, {
      value: data,
      lastModified: Date.now(),
      tags: ctx.tags,
    })
  }
 
  async revalidateTag(tag) {
    // Iterate over all entries in the cache
    for (let [key, value] of cache) {
      // If the value's tags include the specified tag, delete this entry
      if (value.tags.includes(tag)) {
        cache.delete(key)
      }
    }
  }
}

Использование пользовательского обработчика кэша позволит вам обеспечить согласованность во всех pods, хостинге вашего приложения Next.js. Например, вы можете сохранить кэшированные значения где угодно, например, в Redis или AWS S3.

Важно знать:

• revalidatePath — это удобный уровень поверх тегов кэша. Вызов revalidatePath вызовет функцию revalidateTag со специальным тегом по умолчанию для предоставленной страницы.

Кэш сборки

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

Если вы перестраиваете для каждой стадии вашей среды, вам необходимо сгенерировать согласованный идентификатор сборки для использования между контейнерами. Используйте команду generateBuildId в next.config.js.

module.exports = {
  generateBuildId: async () => {
    // This could be anything, using the latest git hash
    return process.env.GIT_HASH
  },
}

Несоответствие версий

Next.js автоматически смягчит большинство случаев несоответствия версий и автоматически перезагрузит приложение для получения новых ресурсов при обнаружении. Например, если есть несоответствие в deploymentId, переходы между страницами будут выполнять жёсткую навигацию по сравнению с использованием предварительно полученного значения.

При перезагрузке приложения может произойти потеря состояния приложения, если оно не спроектировано для сохранения между переходами на страницы. Например, использование состояния URL или локального хранилища сохранило бы состояние после обновления страницы. Однако состояние компонента, например, useState, будет потеряно в таких переходах.

Vercel предоставляет дополнительные защиту от несоответствия версий для приложений Next.js, чтобы гарантировать, что ресурсы и функции предыдущей версии по-прежнему доступны старым клиентам даже после развертывания новой версии.

Вы можете вручную настроить свойство deploymentId в вашем файле next.config.js для обеспечения использования строки запроса ?dpl или заголовка x-deployment-id для каждого запроса.

Ручные плавные завершения

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

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

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

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

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  process.on('SIGTERM', () => {
    console.log('Received SIGTERM: cleaning up')
    process.exit(0)
  })
  process.on('SIGINT', () => {
    console.log('Received SIGINT: cleaning up')
    process.exit(0)
  })
}