Rota İşleyicileri (Route Handlers)

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası — ders 37 / 47.

Sunucu bileşenleri (server components) veri ihtiyaçlarının çoğunu karşılar, çünkü zaten sunucuda çalışırlar. Ancak bazen tarayıcının bir tıklamadan veya bir arama kutusu sabitlendikten sonra veri istemesi gerekir ve bunun için çağrılacak bir uç noktaya (endpoint) ihtiyacınız vardır.

İçinde bir route.js bulunan bir klasör tam olarak bu hale gelir. Sayfalarla aynı yönlendirme (routing) kuralı, sadece farklı bir özel dosya:

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

İçeride, HTTP yönteminin adını taşıyan bir fonksiyon `export` edersiniz:

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

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

Response.json(...) tüm yanıttır: değeri serileştirir ve JSON içerik türünü ayarlar. Aynı dosyadan POST, PUT, DELETE da export edebilirsiniz.

Daha sonra istemci tarafı sıradan tarayıcı kodudur:

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

Aklınızda tutmanız gereken iki şey var. Bir klasör bir page.jsx veya bir route.js barındırabilir, asla ikisini birden barındıramaz: ikisi de aynı URL'yi talep eder. Ve route.js bir bileşen değildir: JSX değil, bir Response döndürür.

Tarayıcının isteğe bağlı veriye ihtiyacı olduğunda veya uygulamanızın dışındaki bir şeyin çağrı yapması gerektiğinde bir route handler kullanın. Bir server component render edilirken veriyi doğrudan okuyabiliyorsa, bırakın okusun.

Görev

Orta

Küçük bir API oluşturun ve bunu tarayıcıdan çağırın.

app/api/dishes/route.js içinde, dishes verisini JSON olarak döndüren bir async function GET dışa aktarın (export edin).
components/DishLoader.jsx içinde loadDishes fonksiyonunu tamamlayın: /api/dishes adresine fetch isteği atın, JSON gövdesini okuyun ve yemek isimlerini setNames ile saklayın.

#load-btn butonuna tıklamak #dish-list elemanını her dört isimle de doldurmalıdır.

Kendin dene

import './globals.css';

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

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