Comment créer une application Next.js ?

Next.js est un framework open-source créé en 2016. Supporté par Vercel et créé sur la librairie React, il permet entre autre de créer une application performante grâce au server-side rendering (SSR), la gestion d'un système de routage mais aussi l'optimisation de vos images.

Création d'une application avec le CLI

Maintenant que vous avez pu explorer les avantages de Next.js et y comprendre certains de ses principaux atours, installons une nouvelle application !

Utilisation de create-next-app

Pour créer une toute nouvelle application Next.js, sur la dernière version disponible, il vous faudra installer node et exécuter la commande de création d'un projet via npx :

npx create-next-app@latest

npx vous permet d'exécuter des paquets. Ici, le tag latest indique que vous souhaitez installer la dernière version publiée.

Une fois la commande entrée, vous devrez répondre à une suite de question : 

✔ What is your project named? … demo
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

1. Nom du projet : celui-ci correspond au nom du dossier qui va être créé ainsi que le nom défini dans le package.json
2. TypeScript, vous avez le choix de l'installer ou non. Il peut être ajouté manuellement par la suite.
3. ESLint est un linter de code. Vous avez également le choix de l'installer dans un second temps.
4. TailwindCSS est une bibliothèque qui vous facilite la gestion du CSS dans votre interface.
5. Vous pouvez décider d'ajouter un répertoire src à la racine de votre application pour gérer plus facilement vos routes, vos composants et vos services.
6. L'App router est quant à lui recommandé, c'est la dernière version de routage proposée par Next.

Une fois ces réponses données, l'installation de votre projet est en cours et vous pouvez accéder au répertoire créé au nom de votre projet :

cd demo/

Contenu et démarrage de l'application

Prenez le temps de découvrir tout le code de votre nouvelle application, vous allez avoir besoin de découvrir l'architecture pour pouvoir la comprendre et la modifier facilement.

Lors de l'initialisation, vous pouvez démarrer l'application avec la commande suivante :

npm run dev

Cette commande a pour effet de démarrer un serveur web de développement pour votre projet. Vous pouvez accéder au serveur grâce à l'URL http://localhost:3000.

Les performances de votre application ne reflèteront pas ce qu'elles pourraient être en production mais l'interface sera, entre autre, actualisée à chaque fois que votre code sera modifié.

Voici à quoi devrait ressembler l'architecture de votre projet :

public/ // dossier des ressources publiques du projet
src/ // si précisé lors de l'installation
  app/ // dossier de routage Next.js
    page.tsx // page d'accueil du projet
    layout.tsx // fichier de layout, appelé rootLayout, base du layout du projet
next.config.mjs // fichier de configuration Next
package.json // fichier npm : liste des dépendances etc.
README.md

Pour commencer à créer votre application, modifiez comme vous le souhaitez le fichier page.tsx, qui est votre fichier de routage pour la page d'accueil.
Celui-ci n'est rien d'autre qu'un composant React, vous pouvez créer d'autres composants dans le dossier src ou app à votre guise comme vous le faisiez dans vos précédentes applications React.