Je suis en train de faire le déploiement d'une application Next.js sur Vercel et je dois ajouter les variables d'environnement (clés API, URLs, etc.). J'ai créé un fichier .env.local sur ma machine et ça marche, mais quand je push sur GitHub et que Vercel fait le build, l'application n'arrive pas à accéder à ces variables. Comment je fais pour passer ça de façon sécurisée à Vercel ?
Le fichier .env.local ne va jamais en production parce que Git l'ignore par défaut (il est dans .gitignore), donc Vercel n'a pas accès à ces variables quand il fait le déploiement. Tu dois configurer les variables directement dans le tableau de bord de Vercel. Va dans ton projet sur le dashboard de Vercel, clique sur Settings > Environment Variables et ajoute chaque variable dont tu as besoin - nom et valeur. Si tu as des variables qui ne sont nécessaires qu'en développement (genre des tests locaux), coche la case "Development" uniquement. Pour celles que ton Next.js doit utiliser à la fois sur le serveur et sur le client, ajoute-les sans restrictions d'environnement.
Pour les variables qui doivent rester uniquement sur le serveur (comme les clés API sensibles), mets-les normalement et utilise-les dans le code à l'intérieur de fonctions côté serveur - getServerSideProps, API routes, Server Components. Next.js ne les expose automatiquement pas au navigateur. Si tu dois accéder à une variable sur le client, préfixe-la avec NEXT_PUBLIC_ dans le nom (genre NEXT_PUBLIC_API_URL) et elle devient disponible dans le navigateur, mais utilise ça uniquement pour des données qui ne sont pas sensibles.
Après avoir tout configuré dans Vercel, fais un nouveau push sur GitHub même sans rien changer, et Vercel va faire un rebuild avec les variables que tu as définies. Si tu utilises les preview deployments (déploiement automatique des pull requests), configure les variables pour qu'elles tournent aussi dans ces environnements de test en allant dans la section "Preview" des settings. Conseil : si tu as beaucoup de variables, copie un bloc entier d'un environnement à un autre plutôt que d'en ajouter une par une.
Va dans le dashboard de Vercel, ouvre le projet, va dans Settings > Environment Variables et colle tes clés que tu utilises dans .env.local. Crée une variable pour chacune (API_URL, API_KEY, ce qu'il faut) et marque dans quel environnement chacune fonctionne - Development, Preview, Production, ou les trois. Après ça quand Vercel fait le build, il injecte ces variables dans le processus et l'application peut y accéder via `process.env.NOM_DE_LA_VARIABLE`.
Maintenant, le point que les gens oublient souvent : si tu utilises des variables qui peuvent seulement être accédées sur le serveur (genre des mots de passe de base de données ou des clés API secrètes), tu dois prefixer avec `NEXT_PUBLIC_` seulement celles qui vont du côté client. Tout ce qui n'a pas ce préfixe reste sécurisé sur le serveur pendant le build. Si tu mets une clé sensible avec `NEXT_PUBLIC_`, elle s'expose dans le JavaScript que le navigateur télécharge - là ce n'est plus sécurisé. Donc attention à cette convention, parce qu'il est facile de se tromper.
Un conseil utile aussi c'est de copier la structure de ton .env.local dans un fichier appelé .env.example (ou .env.local.example), tu enlèves les vraies valeurs, et tu commit ça sur Git. Comme ça celui qui va travailler sur le projet sait exactement quelles variables il faut configurer tant localement que sur Vercel.
Se connecterpour répondre.
