Maîtriser le routeur App de Next.js 14

L'introduction du routeur App dans Next.js 14 représente une évolution majeure dans la façon dont nous concevons le routage et la récupération de données dans les applications React. Dans ce guide complet, nous explorerons ses fonctionnalités clés et les meilleures pratiques.

Pourquoi le routeur App ?

Le nouveau routeur App offre plusieurs avantages par rapport à l'ancien routeur Pages :

• Composants Serveur par Défaut : Meilleures performances et bundles clients plus légers
• Mises en Page Imbriquées : Composition d'interface plus intuitive
• Récupération de Données Simplifiée : Support natif des composants asynchrones
• États de Chargement Améliorés : Conventions intégrées avec loading.js et error.js

Concepts Clés

1. Routage basé sur le système de fichiers

app / marketing / page.tsx; // Page marketing
layout.tsx; // Mise en page marketing
tableau - de - bord / page.tsx; // Page tableau de bord
layout.tsx; // Mise en page tableau de bord
parametres / page.tsx; // Route imbriquée

2. Composants Serveur et Client

Next.js 14 facilite le mélange des composants serveur et client :

// app/components/ComposantServeur.tsx
export default async function ComposantServeur() {
  const data = await fetchData();
  return <div>{data}</div>;
}

// app/components/ComposantClient.tsx
("use client");

export default function ComposantClient() {
  const [etat, setEtat] = useState();
  return <div>Composant Interactif</div>;
}

Optimisation des Performances

1. Streaming

import { Suspense } from "react";
import { SqueletteChargement } from "./loading";

function Page() {
  return (
    <div>
      <Suspense fallback={<SqueletteChargement />}>
        <ComposantLourd />
      </Suspense>
    </div>
  );
}

2. Récupération de Données

async function getData() {
  const res = await fetch("https://api.exemple.com/donnees", {
    next: { revalidate: 3600 }, // Revalidation toutes les heures
  });
  return res.json();
}

export default async function Page() {
  const donnees = await getData();
  return <div>{donnees}</div>;
}

Meilleures Pratiques

1. Colocalisation des Composants : Gardez les composants proches de leurs routes
2. Utilisez les Groupes de Routes : Organisez les routes avec des parenthèses (ex: (marketing))
3. Exploitez les États de Chargement : Implémentez loading.js pour une meilleure expérience utilisateur
4. Optimisez les Images : Utilisez le composant next/image avec des formats modernes
5. Mettez en Œuvre l'ISR : Utilisez revalidate pour la régénération statique incrémentielle

Conclusion

Le routeur App de Next.js 14 offre une manière plus intuitive et puissante de construire des applications web modernes. En comprenant ses concepts fondamentaux et en suivant les meilleures pratiques, vous pouvez créer des applications hautement performantes et maintenables.

Avez-vous déjà essayé le nouveau routeur App ? Partagez vos expériences dans les commentaires !