Comment générer la version de production de votre application Next.js
Déployer une application créée à l'aide de Next.js en production est facile. Ajoutez ces 3 lignes aupackage.json
script
section:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
Nous avons utilisénpm run dev
jusqu'à présent, pour appeler lenext
commande installée localement dansnode_modules/next/dist/bin/next
. Cela a démarré le serveur de développement, qui nous a fournicartes sourcesetrechargement du code à chaud, deux fonctionnalités très utiles lors du débogage.
La même commande peut être appelée pour créer le site Web en passant lebuild
drapeau, en exécutantnpm run build
. Ensuite, la même commande peut être utilisée pour démarrer l'application de production en passant lestart
drapeau, en exécutantnpm run start
.
Ces 2 commandes sont celles que nous devons appeler pour déployer avec succès la version de production de notre site localement. La version de production est hautement optimisée et ne vient pas avec des cartes sources et d'autres choses comme le rechargement de code à chaud qui ne seraient pas bénéfiques pour nos utilisateurs finaux.
Alors, créons un déploiement de production de notre application. Construisez-le en utilisant:
npm run build
La sortie de la commande nous indique que certaines routes (/
et/blog
sont désormais pré-rendus en HTML statique, tandis que/blog/[id]
sera servi par le backend Node.js.
Alors tu peux courirnpm run start
pour démarrer le serveur de production localement:
npm run start
Visitehttp://localhost:3000nous montrera la version de production de l'application, localement.
Téléchargez mon gratuitManuel Next.js
Plus de prochains tutoriels:
- Premiers pas avec Next.js
- Next.js vs Gatsby vs create-react-app
- Comment installer Next.js
- Lier deux pages dans Next.js à l'aide de Link
- Contenu dynamique dans Next.js avec le routeur
- Flux de données vers un composant Next.js à l'aide de getInitialProps
- Styliser les composants Next.js à l'aide de CSS
- Pré-extraire du contenu dans Next.js
- Utilisation du routeur pour détecter le lien actif dans Next.js
- Afficher la source pour confirmer que SSR fonctionne dans Next.js
- Next.js: remplissez la balise head avec des balises personnalisées
- Déployer une application Next.js maintenant
- Next.js: exécutez le code uniquement côté serveur ou côté client dans Next.js
- Déployer une application Next.js en production
- Comment analyser les bundles d'applications Next.js
- Modules de chargement paresseux dans Next.js
- Ajout d'un composant wrapper à votre application Next.js
- Les icônes ajoutées par Next.js à votre application
- Les offres groupées d'applications Next.js
- Comment utiliser le routeur Next.js
- Comment utiliser les routes d'API Next.js
- Comment obtenir des cookies côté serveur dans une application Next.js
- Comment changer le port d'une application Next.js