Gestionnaires de routes

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

Les Server Components répondent à la plupart des besoins en matière de 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, après la saisie dans un champ de recherche, et pour cela, vous avez besoin d'un endpoint à 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 route lorsque le navigateur a besoin de données à la demande, ou lorsque quelque chose d'extérieur à votre app a besoin de faire un appel. Si un composant serveur peut simplement lire les données pendant le rendu, laissez-le faire.

Défi

Moyen

Créez une petite API et appelez-la depuis le navigateur.

Dans app/api/dishes/route.js, exportez une async function GET qui retourne dishes au format JSON.
Dans components/DishLoader.jsx, terminez loadDishes : effectuez un fetch de /api/dishes, lisez le body JSON et stockez les names de 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>
    );
}