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.

Configurer un CDN

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.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.mydomain.com',
  }
  return nextConfig
}

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 chunk JS :

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

Deviendrait :

https://cdn.mydomain.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 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 manuellement le préfixe
• Les requêtes /_next/data/ pour les pages getServerSideProps. Ces requêtes seront toujours faites contre le domaine principal car elles ne sont pas statiques.
• Les requêtes /_next/data/ pour les pages getStaticProps. Ces requêtes seront toujours faites contre le domaine principal pour supporter la Génération Statique Incrémentielle, même si vous ne l'utilisez pas (pour cohérence).