Retour • 21/01/2025

Comment utiliser les fichiers .env en React et Next.js

Écris par Melvyn Malherbe le 21/01/2025

Les fichiers .env sont essentiels pour gérer les variables d'environnement dans tes applications web. Dans cet article, je vais t'expliquer comment ils fonctionnent et comment les utiliser efficacement avec React et Next.js.

C'est quoi un fichier .env ?

Un fichier .env est un fichier de configuration qui stocke des variables d'environnement. Ces variables sont des informations sensibles ou des configurations qui changent selon l'environnement où ton application s'exécute.

Voici à quoi ressemble un fichier .env typique :

API_KEY=abc123xyz789
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
STRIPE_SECRET_KEY=sk_test_123456789

Que mettre dans un fichier .env ?

Les fichiers .env sont parfaits pour stocker :

1. Des clés d'API :

STRIPE_PUBLIC_KEY=pk_test_123
GOOGLE_MAPS_API_KEY=AIza123456

2. Des URLs de services :

API_URL=https://api.monservice.com
WEBSOCKET_URL=wss://ws.monservice.com

3. Des configurations d'environnement :

NODE_ENV=development
DEBUG=true

Exemple en React :

# ❌ Ne fonctionnera pas
API_KEY=123456

# ✅ Fonctionnera
REACT_APP_API_KEY=123456

En Next.js, cette restriction n'existe pas :

# ✅ Fonctionne directement en Next.js
API_KEY=123456

Les différents types de fichiers .env

Il existe plusieurs variantes de fichiers .env pour différents contextes :

1. .env - Fichier de base, valeurs par défaut
2. .env.local - Surcharge locale, non commité
3. .env.development - Pour l'environnement de développement
4. .env.production - Pour l'environnement de production
5. .env.test - Pour l'environnement de test

L'ordre de priorité est important :

.env.local       # Plus haute priorité
.env.development # (en mode development)
.env.production  # (en mode production)
.env             # Plus basse priorité

Comment ça fonctionne avec Vercel et autres plateformes ?

Les plateformes de déploiement comme Vercel gèrent intelligemment les variables d'environnement :

1. Vercel :

• Utilise .env.production pour les déploiements en production
• Permet de définir des variables dans l'interface web
• Supporte les variables chiffrées

# .env.production
NEXT_PUBLIC_API_URL=https://api.production.com

# .env.development
NEXT_PUBLIC_API_URL=http://localhost:3000

2. Netlify :

• Utilise un système similaire
• Configure les variables via l'interface admin
• Supporte les variables par branche

Bonnes pratiques

Voici quelques conseils pour bien gérer tes variables d'environnement :

1. Crée un fichier .env.example :

# .env.example
API_KEY=your_api_key_here
DATABASE_URL=your_database_url_here

2. Utilise des types différents selon l'environnement :

# .env.development
STRIPE_KEY=sk_test_123

# .env.production
STRIPE_KEY=sk_live_456

3. Documente tes variables :

# API Keys
STRIPE_KEY=sk_test_123      # Clé Stripe pour les paiements
SENDGRID_KEY=SG.123        # Clé SendGrid pour les emails

# URLs
API_URL=http://localhost:3000  # URL de l'API backend

Tu peux maintenant gérer proprement les variables d'environnement dans tes applications React et Next.js ! Si tu veux approfondir tes connaissances, je te conseille de lire :

• Les bases de React
• Déployer une application Next.js
• Sécuriser son application web