assetPrefix

Atención: Desplegar en Vercel configura automáticamente una 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.

Para configurar una CDN, puedes configurar un asset prefix y ajustar el origen de tu CDN para que resuelva al dominio donde está alojado Next.js.

Abre next.config.js y añade la configuración assetPrefix:

next.config.js
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // Usa la CDN en producción y localhost para desarrollo.
  assetPrefix: isProd ? 'https://cdn.midominio.com' : undefined,
}

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 una CDN dependerá de tu CDN elegida. 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.

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

  • Archivos en la carpeta public; si quieres servir esos recursos a través de una CDN, tendrás que añadir 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 lo estás usando (por consistencia).