Configuration des segments de route

Les options de segment de route vous permettent de configurer le comportement d'une Page, d'un Layout ou d'un Gestionnaire de route (Route Handler) en exportant directement les variables suivantes :

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export const maxDuration = 5

export default function MyComponent() {}

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export const maxDuration = 5

export default function MyComponent() {}

Bon à savoir :

• Les valeurs des options de configuration doivent actuellement être statiquement analysables. Par exemple, revalidate = 600 est valide, mais revalidate = 60 * 10 ne l'est pas.

Options

dynamic

Modifie le comportement dynamique d'un layout ou d'une page pour le rendre entièrement statique ou entièrement dynamique.

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

Bon à savoir : Le nouveau modèle dans le répertoire app favorise un contrôle granulaire du cache au niveau des requêtes fetch plutôt que le modèle binaire tout ou rien de getServerSideProps et getStaticProps au niveau de la page dans le répertoire pages. L'option dynamic permet de revenir à l'ancien modèle pour faciliter la migration.

• 'auto' (par défaut) : Option par défaut pour mettre en cache autant que possible sans empêcher les composants d'opter pour un comportement dynamique.

• 'force-dynamic' : Force le rendu dynamique (dynamic rendering), ce qui entraîne le rendu des routes pour chaque utilisateur au moment de la requête. Cette option équivaut à getServerSideProps() dans le répertoire pages.

• 'error' : Force le rendu statique et met en cache les données d'un layout ou d'une page en provoquant une erreur si des composants utilisent des fonctions dynamiques (dynamic functions) ou des données non mises en cache. Cette option équivaut à :

  • getStaticProps() dans le répertoire pages.
  • Définir l'option de chaque requête fetch() dans un layout ou une page sur { cache: 'force-cache' }.
  • Définir la configuration du segment sur fetchCache = 'only-cache', dynamicParams = false.
  • dynamic = 'error' change la valeur par défaut de dynamicParams de true à false. Vous pouvez revenir au rendu dynamique des pages pour les paramètres dynamiques non générés par generateStaticParams en définissant manuellement dynamicParams = true.

• 'force-static' : Force le rendu statique et met en cache les données d'un layout ou d'une page en forçant cookies(), headers() et useSearchParams() à retourner des valeurs vides.

Bon à savoir :

• Des instructions sur comment migrer depuis getServerSideProps et getStaticProps vers dynamic: 'force-dynamic' et dynamic: 'error' sont disponibles dans le guide de mise à niveau.

dynamicParams

Contrôle ce qui se passe lorsqu'un segment dynamique est visité et qu'il n'a pas été généré avec generateStaticParams.

export const dynamicParams = true // true | false,

export const dynamicParams = true // true | false,

• true (par défaut) : Les segments dynamiques non inclus dans generateStaticParams sont générés à la demande.
• false : Les segments dynamiques non inclus dans generateStaticParams retourneront une erreur 404.

Bon à savoir :

• Cette option remplace l'option fallback: true | false | blocking de getStaticPaths dans le répertoire pages.
• Lorsque dynamicParams = true, le segment utilise le Streaming Server Rendering.
• Si dynamic = 'error' et dynamic = 'force-static' sont utilisés, la valeur par défaut de dynamicParams sera changée à false.

revalidate

Définit le temps de revalidation par défaut pour un layout ou une page. Cette option ne remplace pas la valeur revalidate définie par des requêtes fetch individuelles.

export const revalidate = false
// false | 0 | number

export const revalidate = false
// false | 0 | number

• false (par défaut) : L'heuristique par défaut pour mettre en cache toutes les requêtes fetch qui définissent leur option cache sur 'force-cache' ou qui sont découvertes avant l'utilisation d'une fonction dynamique (dynamic function). Sémantiquement équivalent à revalidate: Infinity, ce qui signifie que la ressource devrait être mise en cache indéfiniment. Il est toujours possible pour des requêtes fetch individuelles d'utiliser cache: 'no-store' ou revalidate: 0 pour éviter la mise en cache et rendre la route dynamiquement. Ou définir revalidate sur un nombre positif inférieur à la valeur par défaut de la route pour augmenter la fréquence de revalidation.
• 0 : Garantit qu'un layout ou une page est toujours rendu dynamiquement (dynamically rendered) même si aucune fonction dynamique ou requête de données non mise en cache n'est détectée. Cette option change la valeur par défaut des requêtes fetch qui ne définissent pas d'option cache sur 'no-store' mais laisse les requêtes fetch qui optent pour 'force-cache' ou utilisent un revalidate positif inchangées.
• number : (en secondes) Définit la fréquence de revalidation par défaut d'un layout ou d'une page à n secondes.

Bon à savoir : L'option revalidate n'est disponible que lors de l'utilisation du Runtime Node.js. Cela signifie que l'utilisation de l'option revalidate avec runtime = 'edge' ne fonctionnera pas.

Fréquence de revalidation

• La plus petite valeur revalidate parmi chaque layout et page d'une seule route déterminera la fréquence de revalidation de la route entière. Cela garantit que les pages enfants sont revalidées aussi fréquemment que leurs layouts parents.
• Les requêtes fetch individuelles peuvent définir une valeur revalidate inférieure à la valeur par défaut de la route pour augmenter la fréquence de revalidation de la route entière. Cela permet d'opter dynamiquement pour une revalidation plus fréquente pour certaines routes en fonction de certains critères.

fetchCache

export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'

export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'

runtime

export const runtime = 'nodejs'
// 'nodejs' | 'edge'

export const runtime = 'nodejs'
// 'nodejs' | 'edge'

• 'nodejs' (par défaut)
• 'edge'

En savoir plus sur les runtimes Edge et Node.js.

preferredRegion

export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

La prise en charge de preferredRegion et des régions supportées dépend de votre plateforme de déploiement.

Bon à savoir :

• Si preferredRegion n'est pas spécifié, il héritera de l'option du layout parent le plus proche.
• Le layout racine est par défaut défini sur toutes les régions (all).

maxDuration

Par défaut, Next.js ne limite pas l'exécution de la logique côté serveur (rendu d'une page ou gestion d'une API). Les plateformes de déploiement peuvent utiliser maxDuration depuis la sortie de build de Next.js pour ajouter des limites d'exécution spécifiques. Par exemple, sur Vercel.

Note : Ce paramètre nécessite Next.js 13.4.10 ou supérieur.

export const maxDuration = 5

export const maxDuration = 5

Bon à savoir :

• Si vous utilisez Server Actions, définissez maxDuration au niveau de la page pour modifier le timeout par défaut de toutes les Server Actions utilisées sur la page.

generateStaticParams

La fonction generateStaticParams peut être utilisée en combinaison avec des segments de route dynamiques pour définir la liste des paramètres de segment de route qui seront générés statiquement au moment du build plutôt qu'à la demande au moment de la requête.

Voir la référence API pour plus de détails.