Créer et exécuter un projet Next.js

Qu'est-ce que Next.js ?

Next.js est un framework React développé par Vercel pour construire des applications React statiques et rendues côté serveur. Il offre de nombreuses fonctionnalités prêtes à l'emploi, telles que le rendu côté serveur (SSR), la génération de sites statiques (SSG), la routage API, le support CSS et Sass intégré, etc., permettant aux développeurs de créer plus efficacement des applications web modernes.

Principales caractéristiques et avantages de Next.js

Rendu côté serveur (SSR) : Améliore la vitesse de chargement des pages et les performances SEO.
Génération de sites statiques (SSG) : Pré-rend les pages statiques, améliorant les performances et l'expérience utilisateur.
Division automatique du code : Charge uniquement le code JavaScript nécessaire à la page courante, optimisant les performances.
Routage intégré : Routage basé sur le système de fichiers, sans configuration supplémentaire.
Routage API : Permet de créer des points de terminaison API dans le même projet.
Support CSS et Sass intégré : Facilite la gestion des styles.

Utiliser Next.js peut aider les développeurs à construire des applications web modernes et réactives plus efficacement.

Créer et exécuter un projet Next.js avec ServBay

Dans cet article, nous utiliserons l'environnement Node.js fourni par ServBay pour créer et exécuter un projet Next.js. Nous utiliserons la fonction 'Host' de ServBay pour configurer le serveur web et accéder au projet via un proxy inversé et un service de fichiers statiques.

Créer un projet Next.js

Initialiser le projet
Tout d'abord, assurez-vous d'avoir installé l'environnement Node.js fourni par ServBay. Ensuite, utilisez la commande suivante pour initialiser un nouveau projet Next.js :
bash
```
cd /Applications/ServBay/www
npx create-next-app@latest servbay-next-app
```
1
2
Suivez les instructions pour entrer le nom du projet (suggéré : servbay-next-app), et sélectionnez les autres options selon vos besoins.
Installer les dépendances
Entrez dans le répertoire du projet et installez les dépendances :
bash
```
cd servbay-next-app
npm install
```
1
2

Modifier le contenu de sortie du projet Next.js

Modifier le fichier pages/index.js
Ouvrez le fichier pages/index.js et modifiez le contenu pour que la page web affiche "Hello ServBay!" :
javascript
```
export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
    </div>
  );
}
```
1
2
3
4
5
6
7

Entrer en mode développement

Exécuter le serveur de développement
Démarrez le serveur de développement et spécifiez le port (par exemple : 8585) :
bash
```
npm run dev -- -p 8585
```
1
Cela démarrera un serveur de développement local et exposera le port 8585.
Configurer le proxy inversé de l'hôte ServBay
Utilisez la fonction 'Host' de ServBay pour accéder au serveur de développement via un proxy inversé. Dans les paramètres 'Host' de ServBay, ajoutez un nouveau proxy inversé :
- Nom : My first Next.js dev site
- Domaine : servbay-next-test.dev
- Type d'hôte : Proxy inversé
- IP : 127.0.0.1
- Port : 8585
Pour des étapes détaillées, consultez ajouter un site de développement Node.js.
Accéder au mode développement
Ouvrez un navigateur et visitez https://servbay-next-test.dev pour voir le projet en temps réel. Étant donné que ServBay prend en charge les noms de domaine personnalisés et les certificats SSL gratuits, vous bénéficierez d'une sécurité accrue.

Construire une version de production

Construire une version de production
Une fois le développement terminé, utilisez les commandes suivantes pour construire une version de production :
bash
```
npm run build
npm run export
```
1
2
Une fois le processus terminé, les fichiers statiques générés se trouveront dans le répertoire out.
Configurer le service de fichiers statiques
Utilisez la fonction 'Host' de ServBay pour accéder à la version de production via un service de fichiers statiques. Dans les paramètres 'Host' de ServBay, ajoutez un nouveau site web statique :
- Nom : My first Next.js production site
- Domaine : servbay-next-test.prod
- Type d'hôte : Statique
- Répertoire racine du site : /Applications/ServBay/www/servbay-next-app/out
Accéder au mode production
Ouvrez un navigateur et visitez https://servbay-next-test.prod pour voir la version de production. Grâce aux noms de domaine personnalisés et aux certificats SSL gratuits de ServBay, votre site sera plus sécurisé et fiable.

Grâce aux étapes ci-dessus, vous avez créé et exécuté avec succès un projet Next.js et utilisé les fonctionnalités fournies par ServBay pour gérer et accéder à votre projet.