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

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

Вы можете развернуть управляемый 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, чтобы обеспечить низкую задержку, поскольку они могут выполняться перед каждой маршрутизацией или ресурсом в вашем приложении. Эта среда выполнения не требует запуска «на краю» и работает на сервере в одной области. Дополнительная конфигурация и инфраструктура необходимы для запуска Middleware в нескольких регионах.

Если вам нужно добавить логику (или использовать внешний пакет), которая требует всех 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-хеш в имени файла, поэтому их можно безопасно кэшировать неограниченно. Например, Статические импорты изображений. Вы можете настроить TTL для изображений.
• Incremental Static Regeneration (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, чтобы предотвратить кэширование данных, специфичных для пользователя. Это относится как к App Router, так и к Pages Router. Это также включает Режим черновика.

Статические активы

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

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

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

По умолчанию созданные кэшированные активы будут храниться в памяти (по умолчанию 50 МБ) и на диске. Если вы размещаете Next.js с помощью платформы оркестрации контейнеров, например Kubernetes, каждый контейнер будет иметь копию кэша. Чтобы предотвратить отображение устаревших данных, поскольку кэш по умолчанию не разделяется между контейнерами, вы можете настроить кэш 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)
      }
    }
  }
}

Использование пользовательского обработчика кэша позволит вам обеспечить согласованность во всех контейнерах, размещающих ваше приложение 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.

Потоковая передача и ожидание

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

Например, вы можете отключить буферизацию в Nginx, установив X-Accel-Buffering в no:

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*{/}?',
        headers: [
          {
            key: 'X-Accel-Buffering',
            value: 'no',
          },
        ],
      },
    ]
  },
}