Les App Router de Next.js expliqués simplement

Depuis Next.js 13, une nouvelle façon d'organiser son projet est apparue : App Router.

Cette architecture simplifie le développement tout en offrant davantage de performances.

Une organisation plus intuitive

Au lieu de créer les pages dans le dossier pages, tout se passe désormais dans :

app/

Chaque dossier représente une route.

Exemple :

app/
about/
page.tsx

blog/
page.tsx

contact/
page.tsx

Les Layouts

L'une des grandes nouveautés est la possibilité de partager facilement une mise en page.

app/
layout.tsx

Toutes les pages héritent automatiquement de ce layout.

On peut également créer des layouts spécifiques :

app/
dashboard/
layout.tsx

Les Server Components

Par défaut, les composants sont exécutés côté serveur.

Cela permet :

• moins de JavaScript envoyé au navigateur
• un chargement plus rapide
• une meilleure sécurité

Si un composant doit être interactif, il suffit d'ajouter :

"use client";

Les Loading UI

Créer un écran de chargement devient très simple.

Il suffit d'ajouter :

loading.tsx

Next.js affichera automatiquement ce composant pendant le chargement.

Les Error Boundaries

Chaque route peut gérer ses erreurs grâce à :

error.tsx

Cela améliore énormément l'expérience utilisateur.

Conclusion

L'App Router apporte une architecture plus moderne, plus performante et plus agréable à maintenir. Pour les nouveaux projets, il est aujourd'hui recommandé d'utiliser cette approche.