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, zaten sunucuda çalıştıkları için veri ihtiyaçlarının çoğunu karşılar. Ancak bazen tarayıcının, bir tıklamadan veya arama kutusunun durulmasından sonra veri istemesi gerekir ve bunun için çağırabileceğiniz bir uç noktaya 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 işlev dışa aktarırsınız:

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ı olarak verilere ihtiyaç duyduğu veya uygulamanızın dışındaki bir şeyin uygulamanızı çağırması gerektiği durumlarda bir route handler kullanın. Bir sunucu bileşeni verileri oluşturma sırasında doğrudan okuyabiliyorsa, bunu tercih edin.

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>
    );
}