> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Vercel

> Hébergez la documentation à un sous-chemin personnalisé avec Vercel

export const VercelJsonGenerator = () => {
  const [subdomain, setSubdomain] = useState('[SUBDOMAIN]');
  const [subdirectory, setSubdirectory] = useState('docs');
  const vercelConfig = {
    rewrites: [{
      source: "/_mintlify/api/request",
      destination: `https://${subdomain}.mintlify.app/_mintlify/api/request`
    }, {
      source: "/api/request",
      destination: `https://${subdomain}.mintlify.app/_mintlify/api/request`
    }, {
      source: `/${subdirectory}`,
      destination: `https://${subdomain}.mintlify.app`
    }, {
      source: `/${subdirectory}/llms.txt`,
      destination: `https://${subdomain}.mintlify.app/llms.txt`
    }, {
      source: `/${subdirectory}/llms-full.txt`,
      destination: `https://${subdomain}.mintlify.app/llms-full.txt`
    }, {
      source: `/${subdirectory}/sitemap.xml`,
      destination: `https://${subdomain}.mintlify.app/sitemap.xml`
    }, {
      source: `/${subdirectory}/robots.txt`,
      destination: `https://${subdomain}.mintlify.app/robots.txt`
    }, {
      source: `/${subdirectory}/:path*`,
      destination: `https://${subdomain}.mintlify.app/${subdirectory}/:path*`
    }, {
      source: "/mintlify-assets/:path+",
      destination: `https://${subdomain}.mintlify.app/mintlify-assets/:path+`
    }]
  };
  const copyToClipboard = () => {
    navigator.clipboard.writeText(JSON.stringify(vercelConfig, null, 2)).then(() => {
      console.log('Copied config to clipboard!');
    }).catch(err => {
      console.error("Failed to copy: ", err);
    });
  };
  return <div className="p-4 border dark:border-white/10 rounded-2xl not-prose space-y-4">
      <div className="space-y-4">
        <div>
          <label className="block text-sm text-zinc-950/70 dark:text-white/70 mb-1">
            Subdomain
          </label>
          <input type="text" value={subdomain} onChange={e => setSubdomain(e.target.value)} placeholder="your-subdomain" className="w-full p-1 text-sm rounded border dark:border-white/10 bg-transparent" />
        </div>
        <div>
          <label className="block text-sm text-zinc-950/70 dark:text-white/70 mb-1">
            Subdirectory
          </label>
          <input type="text" value={subdirectory} onChange={e => setSubdirectory(e.target.value)} placeholder="docs" className="w-full p-1 text-sm rounded border dark:border-white/10 bg-transparent" />
        </div>
      </div>
      <div className="relative">
        <button onClick={copyToClipboard} className="absolute top-2 right-2 p-2 rounded-lg transition-all duration-200 group">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 dark:text-white/60 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-white/60 transition-colors">
            <path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
            <path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
          </svg>
          <span className="absolute top-9 left-1/2 transform -translate-x-1/2 bg-primary text-white text-xs px-1.5 py-0.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
            Copy
          </span>
        </button>
        <pre className="p-4 rounded-lg overflow-auto text-xs border dark:border-white/10">
          <code>{JSON.stringify(vercelConfig, null, 2)}</code>
        </pre>
      </div>
    </div>;
};

<div id="verceljson-file">
  ## fichier vercel.json
</div>

Le fichier `vercel.json` configure la façon dont votre projet est construit et déployé. Il se trouve à la racine de votre projet et contrôle différents aspects de votre déploiement, notamment le routage, les redirections, les en-têtes et les paramètres de build.

Nous utilisons la configuration `rewrites` pour faire transiter (proxy) les requêtes de votre domaine principal vers votre documentation.

Les réécritures font correspondre les requêtes entrantes à d’autres destinations sans modifier l’URL dans le navigateur. Lorsqu’une personne visite `yoursite.com/docs`, Vercel récupère en interne le contenu depuis `your-subdomain.mintlify.dev/docs`, mais l’utilisateur voit toujours `yoursite.com/docs` dans son navigateur. Cela diffère des redirections, qui enverraient les utilisateurs vers une URL totalement différente.

Vous pouvez personnaliser le sous-chemin avec la valeur de votre choix, comme `/docs`, `/help` ou `/guides`. Vous pouvez également utiliser des sous-chemins profondément imbriqués, comme `/product/docs`.

<div id="repository-structure">
  ## Structure du dépôt
</div>

Vos fichiers de documentation doivent être organisés dans votre dépôt afin de correspondre à la structure de sous-chemin choisie. Par exemple, si vous voulez que votre documentation soit accessible à l’adresse `yoursite.com/docs`, créez un répertoire `docs/` contenant tous vos fichiers de documentation.

<div id="configuration">
  ## Configuration
</div>

Pour héberger votre documentation sur un sous-chemin personnalisé avec Vercel, ajoutez la configuration suivante à votre fichier `vercel.json`. Cet exemple utilise `/docs`, mais vous pouvez le remplacer par n’importe quel sous-chemin :

```json
{
  "rewrites": [
    {
      "source": "/docs",
      "destination": "https://[subdomain].mintlify.dev/docs"
    },
    {
      "source": "/docs/:match*",
      "destination": "https://[subdomain].mintlify.dev/docs/:match*"
    }
  ]
}
```

* **`source`**: Le modèle de chemin sur votre domaine qui déclenche la réécriture.
* **`destination`**: L’adresse vers laquelle la requête doit être mise en proxy.
* **`:match*`**: Un caractère générique qui capture tous les segments de chemin après votre sous-chemin.

Pour plus d’informations, consultez [Configurer des projets avec vercel.json : Rewrites](https://vercel.com/docs/projects/project-configuration#rewrites) dans la documentation Vercel.

<div id="generate-rewrites">
  ### Générer les réécritures
</div>

Entrez votre sous-domaine et le sous-répertoire personnalisé pour générer les règles de réécriture de votre fichier `vercel.json`.

<VercelJsonGenerator />

<div id="using-external-proxies-with-vercel">
  ## Utiliser des proxies externes avec Vercel
</div>

Si vous utilisez un proxy externe (comme Cloudflare ou AWS CloudFront) en amont de votre déploiement Vercel, vous devez le configurer correctement pour éviter les conflits avec la vérification de domaine de Vercel et l’approvisionnement des certificats SSL.

Une mauvaise configuration du proxy peut empêcher Vercel d’approvisionner des certificats SSL Let’s Encrypt et entraîner des échecs de vérification de domaine.

Consultez la liste des [fournisseurs pris en charge](https://vercel.com/guides/how-to-setup-verified-proxy#supported-providers-verified-proxy-lite) dans la documentation de Vercel.

<div id="required-path-allowlist">
  ### Liste d’autorisation de chemins requise
</div>

Votre proxy externe doit autoriser le trafic vers ces chemins spécifiques sans le bloquer, le rediriger ni l’excessivement mettre en cache :

* `/.well-known/acme-challenge/*` - Requis pour la vérification de certificat Let's Encrypt
* `/.well-known/vercel/*` - Requis pour la vérification de domaine Vercel
* `/mintlify-assets/_next/static/*` - Requis pour les ressources statiques

Ces chemins doivent être transmis directement à votre déploiement Vercel sans modification.

<div id="header-forwarding-requirements">
  ### Exigences de transmission des en-têtes
</div>

Assurez-vous que votre proxy transfère correctement l’en-tête `HOST`. Sans un transfert correct de l’en-tête, les requêtes de vérification échoueront.

<div id="testing-your-proxy-setup">
  ### Tester la configuration de votre proxy
</div>

Pour vérifier que votre proxy est correctement configuré :

1. Vérifiez que `https://[yourdomain].com/.well-known/vercel/` renvoie bien une réponse.
2. Assurez-vous que les certificats SSL sont correctement provisionnés dans votre tableau de bord Vercel.
3. Confirmez que la vérification du domaine aboutit.