assetPrefix

Внимание: Развертывание на Vercel автоматически настраивает глобальный CDN для вашего проекта Next.js. Вам не нужно вручную настраивать Asset Prefix.

Полезно знать: В Next.js 9.5+ добавлена поддержка настраиваемого Base Path, который лучше подходит для размещения вашего приложения в подкаталоге, например /docs. Мы не рекомендуем использовать пользовательский Asset Prefix для этого случая.

Настройка CDN

Для настройки CDN вы можете задать префикс ресурсов (asset prefix) и настроить источник CDN для разрешения на домен, где размещён Next.js.

Откройте next.config.mjs и добавьте конфигурацию assetPrefix в зависимости от фазы:

next.config.mjs
// @ts-check
import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'

export default (phase) => {
  const isDev = phase === PHASE_DEVELOPMENT_SERVER
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    assetPrefix: isDev ? undefined : 'https://cdn.mydomain.com',
  }
  return nextConfig
}

Next.js будет автоматически использовать ваш префикс ресурсов для файлов JavaScript и CSS, загружаемых из пути /_next/ (папка .next/static/). Например, с приведённой выше конфигурацией запрос к JS-чанку:

/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

Будет преобразован в:

https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

Точная конфигурация загрузки файлов в CDN зависит от выбранного вами CDN. Единственная папка, которую нужно разместить в CDN — это содержимое .next/static/, которое должно быть загружено как _next/static/, как указано в URL выше. Не загружайте остальную часть папки .next/, так как вы не должны раскрывать серверный код и другую конфигурацию публично.

Хотя assetPrefix охватывает запросы к _next/static, он не влияет на следующие пути:

  • Файлы в папке public; если вы хотите обслуживать эти ресурсы через CDN, вам нужно будет добавить префикс самостоятельно
  • Запросы /_next/data/ для страниц с getServerSideProps. Эти запросы всегда будут выполняться против основного домена, так как они не статические.
  • Запросы /_next/data/ для страниц с getStaticProps. Эти запросы всегда будут выполняться против основного домена для поддержки Инкрементальной статической генерации (ISG), даже если вы её не используете (для единообразия).