assetPrefix

Attention : Déployer sur Vercel configure automatiquement un CDN global pour votre projet Next.js. Vous n'avez pas besoin de configurer manuellement un préfixe d'asset (Asset Prefix).

Bon à savoir : Next.js 9.5+ a ajouté la prise en charge d'un chemin de base (Base Path) personnalisable, qui est plus adapté pour héberger votre application sur un sous-chemin comme /docs. Nous ne vous recommandons pas d'utiliser un préfixe d'asset personnalisé pour ce cas d'usage.

Configurer un CDN

Pour configurer un CDN, vous pouvez définir un préfixe d'asset et configurer l'origine de votre CDN pour qu'elle résolve vers le domaine sur lequel Next.js est hébergé.

Ouvrez next.config.mjs et ajoutez la configuration assetPrefix en fonction de la phase :

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

Next.js utilisera automatiquement votre préfixe d'asset pour les fichiers JavaScript et CSS qu'il charge depuis le chemin /_next/ (dossier .next/static/). Par exemple, avec la configuration ci-dessus, la requête suivante pour un morceau (chunk) JS :

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

Deviendrait :

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

La configuration exacte pour téléverser vos fichiers vers un CDN donné dépendra de votre CDN choisi. Le seul dossier que vous devez héberger sur votre CDN est le contenu de .next/static/, qui doit être téléversé en tant que _next/static/ comme l'indique l'URL ci-dessus. Ne téléversez pas le reste de votre dossier .next/, car vous ne devez pas exposer votre code serveur et d'autres configurations au public.

Bien que assetPrefix couvre les requêtes vers _next/static, il n'influence pas les chemins suivants :

• Les fichiers dans le dossier public ; si vous souhaitez servir ces assets via un CDN, vous devrez introduire le préfixe vous-même