mkcert + Vite & Next.js : HTTPS local (2026)
Configurez mkcert avec Vite et Next.js pour un HTTPS local de confiance. vite.config.js, next dev --experimental-https, domaines .test et fichier hosts.
Équipe Locahl
Configurez mkcert une fois, puis branchez les certificats dans Vite ou Next.js.
Installation mkcert (une fois)
brew install mkcert
mkcert -install
mkdir -p certs
mkcert -cert-file certs/local-cert.pem -key-file certs/local-key.pem \
localhost 127.0.0.1 ::1 monprojet.test "*.monprojet.test"Fichier hosts :
127.0.0.1 monprojet.test
127.0.0.1 api.monprojet.testGuide complet : mkcert SSL local sur Mac.
---
Vite + mkcert
// vite.config.js
import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';
const certDir = path.resolve(__dirname, 'certs');
export default defineConfig({
server: {
host: 'monprojet.test',
port: 5173,
https: {
key: fs.readFileSync(path.join(certDir, 'local-key.pem')),
cert: fs.readFileSync(path.join(certDir, 'local-cert.pem')),
},
},
});Ouvrez https://monprojet.test:5173.
---
Next.js + mkcert
next dev --experimental-https \
--experimental-https-key ./certs/local-key.pem \
--experimental-https-cert ./certs/local-cert.pemDans package.json :
{
"scripts": {
"dev": "next dev --experimental-https --experimental-https-key ./certs/local-key.pem --experimental-https-cert ./certs/local-cert.pem"
}
}---
Dépannage
| Erreur | Solution |
|---|---|
| NET::ERR_CERT_AUTHORITY_INVALID | mkcert -install, redémarrer le navigateur → [[mkcert-net-err-cert-authority-invalid-mac |
| Nom d’hôte non couvert | Régénérez mkcert avec le nom exact |
Après modification hosts : vider le DNS Mac ou ipconfig /flushdns sous Windows.
Conclusion
mkcert + hosts + Vite/Next.js = HTTPS local comme en production. Générez les certs, mappez les domaines .test, pointez chaque serveur vers les PEM.
Prêt à simplifier votre workflow ?
Arrêtez de perdre du temps avec le terminal. Locahl vous permet de gérer votre fichier hosts en quelques clics, avec validation automatique et sans risque d'erreur.
- Interface visuelle intuitive
- Flush DNS automatique
- Gestion multi-environnements
- Sauvegardes automatiques
- Import/Export JSON
Questions fréquentes
Next.js supporte-t-il mkcert nativement ?
Oui — next dev --experimental-https avec --experimental-https-key et --experimental-https-cert pointant vers les fichiers PEM mkcert.
Où est le guide mkcert complet ?
Voir [[https-local-certificat-ssl-mac|mkcert SSL local sur Mac]] — cet article couvre Vite et Next.js.
Articles similaires
Modifier le fichier hosts Windows 11 24H2 (2026)
Guide hosts Windows 11 24H2 : Smart App Control, accès contrôlé aux dossiers, Bloc-notes admin, PowerShell, ipconfig /flushdns et Clear-DnsClientCache.
Équipe Locahl
Aide-mémoire DNS & fichier hosts (Mac, Windows, Linux)
Aide-mémoire imprimable : vider le DNS, chemins du fichier hosts, mkcert et cache navigateur pour macOS, Windows 11 et Linux (2026).
Équipe Locahl
Outils développeurs
Modifier le fichier hosts sans droits admin : est-ce possible ?
Peut-on modifier le fichier hosts sans droits administrateur ? La réponse honnête et les vraies alternatives sous Windows, Mac et Linux quand on ne peut pas élever (proxy, Docker, DNS local, SSH).
Équipe Locahl
Outils développeurs
Utiliser des sous-domaines sur localhost en développement local
Utilisez des sous-domaines sur localhost : l’astuce gratuite *.localhost que les navigateurs résolvent seuls, les sous-domaines fixes via le fichier hosts, et les wildcards avec dnsmasq (Mac, Linux).
Équipe Locahl
Outils développeurs
Vider le cache DNS sur Windows 10 et 11 (2026)
Videz le cache DNS sur Windows 10 et 11 avec ipconfig /flushdns. Commande pas à pas, vérification et solutions quand les changements ne s’appliquent pas.
Équipe Locahl
Outils développeurs