Capítulo 391 de 456

assetPrefix

Core Idea

Configura um CDN para servir os arquivos estáticos gerados pelo Next.js (/_next/static), prefixando as URLs de JS/CSS.

Key Concepts

  • assetPrefix: string de domínio que substitui o prefixo /_next/ para assets JS/CSS
  • Diferença de basePath: basePath é para hospedar a app inteira em sub-path; assetPrefix é especificamente para CDN de assets

Code Examples

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
}
  • O que demonstra: aplicar assetPrefix só em produção, mantendo dev sem CDN.

Anti-patterns

  • Fazer upload de .next/ inteiro pro CDN: só .next/static/ deve ser hospedado, como _next/static/; expor o resto vaza código de servidor e configuração
  • Usar assetPrefix para hospedar em sub-path: usar basePath para esse caso, não é o propósito do assetPrefix
  • Esperar que assetPrefix cubra tudo: não afeta arquivos em public/, nem requests /_next/data/ de getServerSideProps/getStaticProps (sempre vão pro domínio principal)

Key Takeaways

  1. Vercel configura CDN global automaticamente, assetPrefix manual é desnecessário lá
  2. Só .next/static/ precisa ir pro CDN, renomeado como _next/static/
  3. Requests de dados (/_next/data/) sempre batem no domínio principal, mesmo com assetPrefix configurado

Connects To

  • basePath (ch392): alternativa mais adequada para hospedar sob sub-path
AnteriorallowedDevOriginsPróximobasePath