Capítulo 198 de 456

assetPrefix

Core Idea

Config option to point Next.js's /_next/ JS and CSS asset requests at a CDN origin. Deploying on Vercel already configures a global CDN automatically, so this is mainly for self-hosted deployments.

Key Concepts

  • assetPrefix: Prefixo de URL aplicado a chunks JS/CSS servidos de _next/static.
  • basePath vs assetPrefix: basePath é mais adequado para hospedar em um subpath (ex. /docs); não use assetPrefix para esse caso.

Code Examples

// @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
}
  • O que demonstra: Desativa o prefixo em desenvolvimento e aponta para o CDN só em produção, usando a phase de config.

Anti-patterns

  • Fazer upload da pasta .next/ inteira para o CDN: expõe código de servidor e configuração; suba apenas o conteúdo de .next/static/ como _next/static/.

Key Takeaways

  1. Só cobre requests a _next/static; arquivos na pasta public não são prefixados automaticamente.
  2. A URL de exemplo /_next/static/chunks/....js vira https://cdn.mydomain.com/_next/static/chunks/....js.
  3. Vercel já cuida disso automaticamente — não configure manualmente lá.

Connects To

  • basePath: alternativa correta para hospedar sob um subpath em vez de CDN.
  • public folder: não é coberto por assetPrefix.
AnteriorappDirPróximoauthInterrupts