Handler Rute
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 37 dari 47.
Komponen server memenuhi sebagian besar kebutuhan data karena sudah berjalan di server. Namun, terkadang browser harus meminta data nanti, setelah kamu mengeklik sesuatu atau setelah kotak pencarian selesai diperbarui. Untuk itu, kamu memerlukan endpoint untuk dipanggil.
Folder yang berisi route.js akan menjadi persis seperti itu. Aturan peruteannya sama seperti pada halaman, tetapi file khususnya berbeda:
app/
api/
dishes/
route.js -> /api/dishesDi dalamnya, kamu mengekspor fungsi yang namanya sama dengan method HTTP:
import { dishes } from '../../../lib/dishes.js';
export async function GET() {
return Response.json(dishes);
}Response.json(...) adalah seluruh respons: fungsi ini menserialisasi nilai dan menetapkan tipe konten JSON. Kamu juga bisa mengekspor POST, PUT, DELETE dari file yang sama.
Lalu bagian client adalah kode browser biasa:
const res = await fetch('/api/dishes');
const data = await res.json();Ada dua hal yang perlu kamu ingat. Sebuah folder dapat berisi page.jsx atau route.js, jangan keduanya: keduanya akan mengklaim URL yang sama. Dan route.js bukan komponen: berkas ini mengembalikan Response, bukan JSX.
Gunakan route handler saat browser membutuhkan data sesuai permintaan, atau saat sesuatu di luar aplikasimu perlu memanggilnya. Jika server component bisa langsung membaca data saat merender, biarkan saja.
Tantangan
SedangBuat API kecil dan panggil dari browser.
- Di
app/api/dishes/route.js, eksporasync function GETyang mengembalikandishessebagai JSON. - Di
components/DishLoader.jsx, selesaikanloadDishes: ambil/api/dishes, baca isi JSON, dan simpan nama hidangan dengansetNames.
Saat #load-btn diklik, #dish-list harus terisi dengan keempat nama.
Coba sendiri
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
