Gestionnaires de routes

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy. Leçon 37 sur 47.

Les composants serveur couvrent la plupart des besoins en données, car ils s’exécutent déjà sur le serveur. Mais parfois, le navigateur doit demander des données plus tard, après un clic, une fois que la zone de recherche s’est stabilisée, et pour cela, vous avez besoin d’un point de terminaison à appeler.

Un dossier contenant un fichier route.js devient exactement cela. Même règle de routage que pour les pages, mais avec un fichier spécial différent :

app/
    api/
        dishes/
            route.js     ->  /api/dishes

À l'intérieur, vous exportez une fonction nommée d'après la méthode HTTP :

import { dishes } from '../../../lib/dishes.js';

export async function GET() {
    return Response.json(dishes);
}

Response.json(...) est la réponse complète : elle sérialise la valeur et définit le type de contenu JSON. Vous pouvez également exporter POST, PUT, DELETE depuis ce même fichier.

Ensuite, la partie client est du code navigateur ordinaire :

const res = await fetch('/api/dishes');
const data = await res.json();

Deux choses à bien distinguer. Un dossier peut contenir un page.jsx ou un route.js, jamais les deux : ils revendiqueraient tous les deux la même URL. Et route.js n'est pas un composant : il renvoie une Response, pas du JSX.

Utilisez un gestionnaire de routes lorsque le navigateur a besoin de données à la demande, ou lorsqu’un élément externe à votre application doit l’appeler. Si un composant serveur peut simplement lire les données lors du rendu, laissez-le faire.

Défi

Moyen

Crée une petite API et appelle-la depuis le navigateur.

Dans app/api/dishes/route.js, exporte une async function GET qui renvoie dishes au format JSON.
Dans components/DishLoader.jsx, termine loadDishes : récupère /api/dishes, lis le corps JSON et stocke les noms des plats avec setNames.

Cliquer sur #load-btn doit remplir #dish-list avec les quatre noms.

Essayez vous-même

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}