Gestori delle route

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 37 di 47.

I componenti server coprono la maggior parte delle esigenze relative ai dati, perché vengono già eseguiti sul server. Ma a volte il browser deve richiedere dati in un secondo momento, dopo un clic, quando una casella di ricerca smette di aggiornarsi, e per questo serve un endpoint da chiamare.

Una cartella con un route.js al suo interno diventa esattamente quello. La stessa regola di routing delle pagine, ma con un file speciale diverso:

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

All'interno, esporti una funzione che prende il nome dal metodo HTTP:

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

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

Response.json(...) è l’intera risposta: serializza il valore e imposta il tipo di contenuto JSON. Puoi esportare anche POST, PUT, DELETE dallo stesso file.

Poi la parte del client è normale codice del browser:

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

Due cose da tenere a mente. Una cartella può contenere un page.jsx oppure un route.js, mai entrambi: rivendicherebbero entrambi lo stesso URL. E route.js non è un componente: restituisce una Response, non JSX.

Ricorri a un gestore di route quando il browser ha bisogno di dati su richiesta o quando qualcosa al di fuori della tua app deve effettuare una chiamata. Se un componente server può semplicemente leggere i dati durante il rendering, lascia che lo faccia.

Sfida

Medio

Crea una piccola API e chiamala dal browser.

In app/api/dishes/route.js, esporta una async function GET che restituisca dishes come JSON.
In components/DishLoader.jsx, completa loadDishes: recupera /api/dishes, leggi il corpo JSON e memorizza i nomi dei piatti con setNames.

Facendo clic su #load-btn si devono inserire tutti e quattro i nomi in #dish-list.

Provalo tu

import './globals.css';

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

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