Déployer une application Next.js en production

Déployer une application créée à l'aide de Next.js en production est facile. Ajoutez ces 3 lignes aupackage.json scriptsection:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Nous avons utilisénpm run devjusqu'à présent, pour appeler lenextcommande 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 lebuilddrapeau, en exécutantnpm run build. Ensuite, la même commande peut être utilisée pour démarrer l'application de production en passant lestartdrapeau, 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/blogsont désormais pré-rendus en HTML statique, tandis que/blog/[id]sera servi par le backend Node.js.

Alors tu peux courirnpm run startpour démarrer le serveur de production localement:

npm run start

Visitehttp://localhost:3000nous montrera la version de production de l'application, localement.

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