basePath

Pour déployer une application Next.js sous un sous-chemin d'un domaine, vous pouvez utiliser l'option de configuration basePath.

basePath vous permet de définir un préfixe de chemin pour l'application. Par exemple, pour utiliser /docs au lieu de '' (une chaîne vide, valeur par défaut), ouvrez next.config.js et ajoutez la configuration basePath :

module.exports = {
  basePath: '/docs',
}

Bon à savoir : Cette valeur doit être définie au moment de la construction et ne peut pas être modifiée sans reconstruire l'application, car la valeur est intégrée dans les bundles côté client.

Liens

Lorsque vous créez des liens vers d'autres pages en utilisant next/link et next/router, le basePath sera automatiquement appliqué.

Par exemple, utiliser /about deviendra automatiquement /docs/about lorsque basePath est défini sur /docs.

export default function HomePage() {
  return (
    <>
      <Link href="/about">Page À propos</Link>
    </>
  )
}

HTML généré :

<a href="/docs/about">Page À propos</a>

Cela garantit que vous n'avez pas besoin de modifier tous les liens de votre application lorsque vous changez la valeur de basePath.

Images

Lorsque vous utilisez le composant next/image, vous devrez ajouter le basePath devant src.

Par exemple, utiliser /docs/me.png servira correctement votre image lorsque basePath est défini sur /docs.

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>Ma page d'accueil</h1>
      <Image
        src="/docs/me.png"
        alt="Photo de l'auteur"
        width={500}
        height={500}
      />
      <p>Bienvenue sur ma page d'accueil !</p>
    </>
  )
}

export default Home