assetPrefix

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

Es bueno saberlo: Next.js 9.5+ añadió soporte para un Base Path personalizable, que es más adecuado para alojar tu 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, puedes establecer un asset prefix y configurar el origen de tu CDN para que resuelva al dominio donde está alojado Next.js.

Abre next.config.mjs y añade 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 tu 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 de 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 subir tus archivos a un CDN específico dependerá del CDN que elijas. La única carpeta que necesitas alojar en tu CDN es el contenido de .next/static/, que debe subirse como _next/static/ como indica la URL anterior. No subas el resto de tu carpeta .next/, ya que no deberías exponer tu código de servidor y otras configuraciones al público.

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

• Archivos en la carpeta public; si deseas servir esos recursos a través de un CDN, tendrás que introducir 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ás usando (por consistencia).