assetPrefix

Atención: Desplegar en Vercel configura automáticamente un CDN global para su proyecto Next.js. No necesita configurar manualmente un Asset Prefix.

Es bueno saberlo: Next.js 9.5+ agregó soporte para un Base Path personalizable, que es más adecuado para alojar su aplicación en un sub-path como /docs. No sugerimos usar un Asset Prefix personalizado para este caso de uso.

Configurar un CDN

Para configurar un CDN, puede establecer un asset prefix y configurar el origen de su CDN para que resuelva al dominio donde está alojado Next.js.

Abra next.config.mjs y agregue la configuración assetPrefix basada en la fase:

// @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.midominio.com',
  }
  return nextConfig
}

Next.js usará automáticamente su asset prefix para los archivos JavaScript y CSS que carga desde la ruta /_next/ (carpeta .next/static/). Por ejemplo, con la configuración anterior, la siguiente solicitud para un chunk JS:

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

Se convertiría en:

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

La configuración exacta para cargar sus archivos en un CDN específico dependerá del CDN que elija. La única carpeta que necesita alojar en su CDN es el contenido de .next/static/, que debe cargarse como _next/static/ como lo indica la URL anterior. No cargue el resto de su carpeta .next/, ya que no debe exponer su código de servidor y otra configuración al público.

Si bien assetPrefix cubre las solicitudes a _next/static, no influye en las siguientes rutas:

• Archivos en la carpeta public; si desea servir esos recursos a través de un CDN, deberá agregar el prefijo manualmente
• Solicitudes /_next/data/ para páginas con getServerSideProps. Estas solicitudes siempre se harán contra el dominio principal ya que no son estáticas.
• Solicitudes /_next/data/ para páginas con getStaticProps. Estas solicitudes siempre se harán contra el dominio principal para soportar Generación Estática Incremental, incluso si no la está usando (por consistencia).