ServBay

Français

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Tiếng Việt
Türkçe
Italiano

Français

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Tiếng Việt
Türkçe
Italiano

Appearance

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 ou app, 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 :

  1. ServBay est installé sur votre Mac (macOS).
  2. 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.

  1. Ouvrez le terminal et naviguez vers le dossier racine web par défaut de ServBay :

    bash
    cd /Applications/ServBay/www

  2. Initialisez le projet avec create-next-app : Exécutez la commande suivante pour créer un nouveau projet Next.js. Nous recommandons ici le nom servbay-next-app ; un dossier du même nom sera créé dans /Applications/ServBay/www.

    bash
    npx create-next-app@latest servbay-next-app

    npx 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.

  3. Accédez au dossier du projet et installez les dépendances :

    bash
    cd servbay-next-app
npm install

    La commande npm install installe toutes les dépendances définies dans le fichier package.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.

  1. Ouvrez le fichier pages/index.js (si vous avez choisi le Pages Router). Si vous avez opté pour l’App Router, modifiez plutôt app/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

  2. Modifiez 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>
  );
}

    Avec 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.

  1. Lancez le serveur de développement Next.js : Depuis la racine du projet (/Applications/ServBay/www/servbay-next-app), exécutez :

    bash
    npm run dev -- -p 8585

    Cette 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.

  2. 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 vers 127.0.0.1:8585.

    Retrouvez les détails dans la documentation Ajouter un site Node.js de développement dans ServBay.

  3. 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.

  1. 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 :

    bash
    npm run build
npm run export
    • npm run build compile le projet et produit une version optimisée dans le dossier .next.
    • npm run export (ou la configuration output: 'export' selon la version de Next.js) exporte l’application en fichiers HTML, CSS et JavaScript statiques, placés dans le dossier out.

  2. 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.

  3. 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.