Prise en main de Next.js

1. Initialisation avec create-next-app

La méthode la plus simple et recommandée pour démarrer un projet Next.js consiste à utiliser l’outil officiel create-next-app. Cet utilitaire automatise l’installation des dépendances et la configuration initiale du projet.

Pour créer un nouveau projet, il suffit d’exécuter la commande suivante dans le terminal :

npx create-next-app@latest mon-projet 

Une fois lancée, la commande déclenche une série de questions interactives permettant de personnaliser le projet. Voici les choix recommandés dans le cadre de ce livre :

Une fois la configuration terminée, le projet est prêt à être utilisé.

2. Lancer le serveur de développement...

1. Arborescence générée

Une fois le projet généré avec create-next-app, une structure de dossiers claire et modulaire est mise en place par défaut. Cette organisation favorise une séparation des responsabilités et une montée en complexité progressive.

L’arborescence initiale se présente ainsi :

mon-projet/ 
├── app/                 # Contient les routes et les composants 
│   └── page.tsx         # Page d'accueil (route "/") 
├── public/              # Fichiers statiques 
├── styles/              # Fichiers CSS globaux ou Tailwind 
├── tsconfig.json        # Configuration TypeScript 
├── next.config.js       # Configuration spécifique à Next.js 
├── package.json         # Scripts, dépendances et métadonnées 
└── ...                  # Autres fichiers générés 

Chaque dossier a un rôle bien défini. Le dossier app/ constitue le cœur du système de routage basé sur la structure des fichiers, tandis que public/ permet l’hébergement de ressources statiques accessibles directement. Cette structure de départ est pensée pour accompagner aussi bien les prototypes rapides que les applications complexes et professionnelles.

2. Convention plutôt que configuration

Next.js repose sur une philosophie simple mais puissante : la convention plutôt que la configuration. Autrement dit, le framework préfère définir des règles claires et cohérentes plutôt que de laisser chaque projet réinventer sa propre organisation. Ce choix structure le développement dès...

1. Principe général du routage par fichiers

Chaque segment de route est représenté par un dossier dans app/. Par exemple :

Le dossier app/ contient la logique du site, basée sur React et le système de routing de Next.js.

Chaque dossier dans app/ devient une route (’app/contact/page.tsx’ -> ’/contact’).

Il gère :

Tous les fichiers de app/ sont transpilés, rendus et optimisés par Next.js.

Le dossier app/ contient surtout des routes, layouts et composants de page, qu’ils soient statiques ou non. Cependant, il ne doit pas contenir d’actifs statiques comme des images, polices… : pour cela, utilisez public/.

2. Fichiers spéciaux à connaître

Une route peut contenir plusieurs fichiers réservés par Next.js :

1. Une évolution majeure du modèle React

Avec la sortie de Next.js 13, l’App Router introduit un changement fondamental dans la façon de concevoir les composants React au sein d’une application : la séparation explicite entre server components et client components. Ce modèle repose sur une avancée de React 18 : les React Server Components (RSC), qui permettent de déporter par défaut l’exécution du rendu côté serveur.

L’objectif est double : réduire drastiquement la charge JavaScript côté navigateur et améliorer les performances globales de l’application, notamment via le streaming progressif des pages. Contrairement à une Single Page Application (SPA) classique, où tous les composants sont chargés et évalués dans le navigateur, une application Next.js moderne exécute la majorité de son interface sur le serveur, en ne transmettant au client que le strict nécessaire pour l’interaction. 

2. Le paradigme server-first

Avec l’App Router, chaque fichier .tsx est traité par défaut comme un server component, sauf s’il est explicitement marqué comme client. Autrement dit, la logique d’affichage est exécutée côté serveur, puis le résultat HTML est envoyé directement au navigateur.

Ce paradigme inversé (server-first plutôt que client-first) modifie profondément la manière de penser les applications React. Il privilégie la génération du contenu sur le serveur, là où les données et les ressources sensibles sont accessibles, avant de ne transférer au client que le strict nécessaire.

Cette approche présente plusieurs avantages :

Dans...

1. Créer une nouvelle page

Dans une application Next.js utilisant l’App Router, chaque sous-dossier du répertoire app/ correspond automatiquement à une route du site. Ainsi, pour ajouter une nouvelle page, il suffit de créer un dossier dédié à cette route et d’y inclure un fichier nommé page.tsx.

Par exemple, pour créer une page "À propos", il convient d’ajouter la structure suivante dans l’arborescence :

app/ 
├── about/ 
│   └── page.tsx 

Le fichier page.tsx contient le composant de la page :

// app/about/page.tsx 
export default function AboutPage() { 
  return ( 
  <main> 
    <h1>À propos</h1> 
    <p>Bienvenue sur notre site !</p> 
  </main> 
  ); 
} 

Cette page est alors immédiatement accessible à l’adresse /about, sans qu’il soit nécessaire de configurer manuellement un système de routage. La structure du répertoire app/ suffit à elle seule à définir l’arborescence des routes du site. Cette approche simplifie considérablement le développement, tout en rendant l’architecture du projet plus lisible et maintenable.

2. Ajouter des composants réutilisables

Dans un projet Next.js, les composants sont de simples fonctions React exportées depuis des fichiers TypeScript. Pour organiser ces composants, il est recommandé de créer un dossier components/ à la racine du projet. Ce répertoire regroupe les éléments d’interface réutilisables, tels que les titres, boutons, formulaires ou cartes.

Par exemple, un composant Titre peut...