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 Asset Prefix.

Bon à savoir : Next.js 9.5+ a ajouté la prise en charge d'un 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 Asset Prefix personnalisé pour ce cas d'utilisation.

Pour configurer un CDN, vous pouvez définir un asset prefix et configurer l'origine de votre CDN pour qu'elle résolve vers le domaine hébergeant Next.js.

Ouvrez next.config.js et ajoutez la configuration assetPrefix :

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // Utilisez le CDN en production et localhost pour le développement.
  assetPrefix: isProd ? 'https://cdn.mondomaine.com' : undefined,
}

Next.js utilisera automatiquement votre asset prefix 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 de 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 choix de CDN. 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 indiqué par l'URL ci-dessus. Ne téléversez pas le reste de votre dossier .next/, car vous ne devriez 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 ressources via un CDN, vous devrez ajouter le préfixe vous-même