Route-Handler

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy. Lektion 37 von 47.

Server-Komponenten decken die meisten Datenbedürfnisse ab, da sie bereits auf dem Server laufen. Aber manchmal muss der Browser Daten erst später anfragen, nach einem Klick, nachdem sich ein Suchfeld beruhigt hat, und dafür benötigen Sie einen Endpunkt, den Sie aufrufen können.

Ein Ordner mit einer route.js darin wird genau dazu. Dieselbe Routing-Regel wie bei Seiten, aber eine andere spezielle Datei:

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

Im Inneren exportieren Sie eine Funktion, die nach der HTTP-Methode benannt ist:

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

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

Response.json(...) ist die gesamte Antwort: Es serialisiert den Wert und setzt den JSON-Content-Type. Sie können auch POST, PUT, DELETE aus derselben Datei exportieren.

Dann ist die Client-Hälfte gewöhnlicher Browser-Code:

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

Zwei Dinge, die Sie beachten sollten. Ein Ordner kann eine page.jsx oder eine route.js enthalten, niemals beides: Beide würden dieselbe URL beanspruchen. Und route.js ist keine Komponente: Es gibt eine Response zurück, kein JSX.

Greife auf einen Routen-Handler zurück, wenn der Browser Daten bei Bedarf benötigt oder wenn etwas außerhalb deiner App darauf zugreifen muss. Wenn eine Serverkomponente die Daten einfach beim Rendern lesen kann, dann lass sie das tun.

Aufgabe

Mittel

Erstelle eine kleine API und rufe sie vom Browser aus auf.

Exportiere in app/api/dishes/route.js eine async function GET, die dishes als JSON zurückgibt.
Vervollständige in components/DishLoader.jsx loadDishes: Rufe /api/dishes ab, lies den JSON-Body und speichere die Gerichtsnamen mit setNames.

Durch Klicken auf #load-btn müssen alle vier Namen in #dish-list eingefügt werden.

Probier es selbst

import './globals.css';

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

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