Créer et exécuter un projet Next.js avec ServBay
Vue d’ensemble
Next.js est un framework React puissant, développé et maintenu par Vercel, largement utilisé pour construire des applications web modernes et performantes. Il offre de nombreuses fonctionnalités prêtes à l’emploi, simplifiant grandement le processus de développement d’applications complexes.
Qu’est-ce que Next.js ?
Next.js est un framework open source populaire pour React, qui prend en charge plusieurs méthodes de rendu telles que le rendu côté serveur (SSR) et la génération de site statique (SSG). Ces fonctionnalités améliorent les performances, l’expérience utilisateur et l’optimisation pour les moteurs de recherche (SEO). Next.js intègre un système de routage basé sur le système de fichiers, des routes API, le découpage de code, la gestion des CSS Modules et bien plus, offrant ainsi une expérience de développement complète.
Principales caractéristiques et atouts de Next.js
- Support de multiples stratégies de rendu : Prise en charge du rendu côté serveur (SSR), de la génération statique (SSG), du rendu côté client (CSR) ainsi que de solutions hybrides, permettant aux développeurs d’opter pour le mode de rendu le mieux adapté à leur projet.
- Routage par système de fichiers : Génération automatique des routes à partir des dossiers
pages
ouapp
, offrant une structure claire et intuitive. - Routes API : Possibilité de créer facilement ses propres endpoints API directement dans un projet Next.js, facilitant le développement full stack.
- Découpage automatique du code : Découpage des scripts au niveau des pages, ne chargeant que le JavaScript nécessaire à la page courante pour améliorer la rapidité du site.
- Composant image optimisé (
next/image
) : Optimisation automatique de la taille, du format et du chargement des images pour des performances accrues. - Support natif de CSS et Sass : Gestion aisée des styles via CSS Modules et fichiers Sass.
- Actualisation rapide (Fast Refresh) : Retour instantané sur les modifications du code lors du développement.
Avec Next.js, les développeurs peuvent créer plus efficacement des applications web modernes, hautes performances, évolutives et faciles à maintenir.
Exécuter un projet Next.js avec ServBay
ServBay propose un environnement de développement web local intégré, incluant Node.js et de nombreux autres outils. Grâce à l’environnement Node.js de ServBay ainsi qu’à la gestion simplifiée des sites web (incluant proxy inverse et service de fichiers statiques), il devient facile de créer, développer et déployer un projet Next.js.
Ce guide vous explique comment créer un projet Next.js, lancer le serveur de développement (via un proxy inverse) et déployer la version de production (via la publication de fichiers statiques) dans l’environnement ServBay.
Prérequis
Avant de commencer, assurez-vous d’avoir effectué les préparatifs suivants :
- ServBay est installé sur votre Mac (macOS).
- Le paquet Node.js nécessaire est installé et activé via l’interface de gestion des paquets de ServBay. Si Node.js n’est pas encore installé, consultez le guide Utiliser l’environnement Node.js de ServBay.
Étapes à suivre
1. Créer un projet Next.js
Nous allons d’abord initialiser un nouveau projet Next.js.
Ouvrez le terminal et naviguez vers le dossier racine web par défaut de ServBay :
bashcd /Applications/ServBay/www
1Initialisez le projet avec
create-next-app
: Exécutez la commande suivante pour créer un nouveau projet Next.js. Nous recommandons ici le nomservbay-next-app
; un dossier du même nom sera créé dans/Applications/ServBay/www
.bashnpx create-next-app@latest servbay-next-app
1npx
permet d’exécuter des commandes de paquets Node.js ;create-next-app@latest
lance l’outil d’initialisation Next.js dans sa dernière version. Suivez les instructions du terminal (choix de TypeScript, ESLint, Tailwind CSS, App Router, etc.) pour configurer le projet selon vos besoins.Accédez au dossier du projet et installez les dépendances :
bashcd servbay-next-app npm install
1
2La commande
npm install
installe toutes les dépendances définies dans le fichierpackage.json
du projet.
2. Modifier le contenu affiché par défaut (optionnel)
Pour vérifier le bon fonctionnement du projet, il suffit de changer brièvement le contenu de la page d’accueil.
Ouvrez le fichier
pages/index.js
(si vous avez choisi le Pages Router). Si vous avez opté pour l’App Router, modifiez plutôtapp/page.js
. Ici, nous partons de l’exemple Pages Router :bash# Ouvrez le fichier avec votre éditeur favori, par exemple VS Code code pages/index.js
1
2Modifiez le contenu du fichier pour qu’il affiche "Hello ServBay!" :
javascript// pages/index.js (Pages Router) export default function Home() { return ( <div> <h1>Hello ServBay!</h1> <p>This page is running via ServBay.</p> </div> ); }
1
2
3
4
5
6
7
8
9Avec l’App Router (
app/page.js
), la structure du fichier diffère légèrement, mais l’essentiel est d’adapter le contenu du<h1>
.
3. Passer en mode développement
En phase de développement, Next.js met à disposition un serveur de développement prenant en charge le rechargement automatique (HMR) et l’actualisation rapide, ce qui permet de voir en temps réel les modifications. La fonction de proxy inverse de ServBay est idéale pour lier un nom de domaine local à ce serveur de développement.
Lancez le serveur de développement Next.js : Depuis la racine du projet (
/Applications/ServBay/www/servbay-next-app
), exécutez :bashnpm run dev -- -p 8585
1Cette commande démarre le serveur de développement Next.js sur le port local 8585. Vous pouvez indiquer un autre port disponible si nécessaire.
Configurez le site ServBay (proxy inverse) : Ouvrez l’interface ServBay, allez dans la gestion des sites web et ajoutez un nouveau site avec les paramètres suivants :
- Nom :
My first Next.js dev site
(ou tout autre nom de votre choix) - Domaine :
servbay-next-dev.servbay.demo
(l’usage du suffixe.servbay.demo
est recommandé pour les domaines de test locaux) - Type de site : sélectionnez
Proxy inverse (Reverse Proxy)
- IP du proxy :
127.0.0.1
(adresse de loopback locale) - Port du proxy :
8585
(doit correspondre au port d’écoute du serveur Next.js)
Après configuration, enregistrez et appliquez les modifications. ServBay va automatiquement configurer Caddy ou Nginx (selon votre configuration) pour diriger les requêtes du domaine
servbay-next-dev.servbay.demo
vers127.0.0.1:8585
.Retrouvez les détails dans la documentation Ajouter un site Node.js de développement dans ServBay.
- Nom :
Accédez au site en mode développement : Ouvrez votre navigateur et rendez-vous sur
https://servbay-next-dev.servbay.demo
.ServBay gère automatiquement les certificats SSL pour chaque nom de domaine ajouté localement (via ServBay User CA), vous permettant ainsi de travailler en HTTPS sans alertes de sécurité du navigateur. ServBay prend en charge les domaines personnalisés et les certificats SSL gratuits, ce qui est très pratique en développement local.
4. Construire la version de production et déployer en mode statique
Une fois votre projet Next.js finalisé et prêt pour la production, il convient de générer une version optimisée. Pour les projets Next.js qui produisent une sortie statique (output: 'export'
ou commande next export
), le service de fichiers statiques de ServBay est idéal.
Générez la version de production et exportez les fichiers statiques : Depuis le dossier racine du projet (
/Applications/ServBay/www/servbay-next-app
), exécutez :bashnpm run build npm run export
1
2npm run build
compile le projet et produit une version optimisée dans le dossier.next
.npm run export
(ou la configurationoutput: 'export'
selon la version de Next.js) exporte l’application en fichiers HTML, CSS et JavaScript statiques, placés dans le dossierout
.
Configurez le site ServBay (service de fichiers statiques) : Ouvrez l’interface ServBay, rendez-vous dans la gestion des sites web et ajoutez un site avec :
- Nom :
My first Next.js production site
(ou tout autre nom) - Domaine :
servbay-next-prod.servbay.demo
- Type de site : sélectionnez
Statique (Static)
- Racine du site : indiquez le chemin complet du dossier
out
généré par Next.js, soit/Applications/ServBay/www/servbay-next-app/out
.
Enregistrez et appliquez les modifications. ServBay configure alors le serveur web pour servir directement les fichiers depuis
/Applications/ServBay/www/servbay-next-app/out
.- Nom :
Accédez au site en mode production : Depuis votre navigateur, visitez le domaine
https://servbay-next-prod.servbay.demo
. Vous verrez alors le site statique généré par Next.js.Là aussi, grâce aux domaines personnalisés et à la gestion SSL automatique de ServBay, votre site de production local sera servi en HTTPS.
Conclusion
En suivant ces étapes, vous avez créé un projet Next.js dans l’environnement de développement local ServBay, appris à utiliser le proxy inverse pour le mode développement et à déployer la version de production en mode statique. Les fonctionnalités intégrées et l’administration des sites web de ServBay simplifient grandement le workflow de développement et de test local pour vos projets Next.js.