Menunggu Parameter Route
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 24 dari 47.
Route dinamis memberikan segmen URL melalui params kepada halamanmu. Di Next 15, ada hal penting yang perlu diingat:
params adalah sebuah promise.
// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
const { slug } = await params;
// /menu/carbonara -> slug === 'carbonara'
}Lupakan await, dan tidak ada yang mengalami crash. Inilah yang membuatnya sulit disadari. Melakukan destructuring pada promise hanya menghasilkan undefined:
const { slug } = params; // undefined
const dish = await getDish(slug); // tidak menemukan apa punHalaman masih ditampilkan. Hanya saja kosong, atau penuh dengan konten pengganti, lalu kamu menelusuri lapisan datamu untuk mencari bug yang sebenarnya tidak pernah ada.
Aturan yang sama berlaku untuk searchParams. Keduanya adalah promise, keduanya perlu ditunggu dengan await, dan keduanya hanya tersedia untuk komponen server async. Ini satu alasan lagi mengapa halaman yang baru saja kamu tulis harus bersifat async.
Mengapa perlu promise? Agar Next.js dapat mulai merender bagian halamanmu yang tidak bergantung pada URL sebelum selesai menentukan bagian yang bergantung pada URL.
Tantangan
Mudahapp/menu/[slug]/page.jsx hampir benar, tetapi tidak pernah menunggu params, sehingga setiap hidangan ditampilkan sebagai Unknown dish.
- Tunggu
paramssebelum melakukan destrukturisasi:const { slug } = await params;
lib/data.js dan halaman beranda terkunci. Saat mengunjungi /menu/carbonara, Carbonara harus ditampilkan di #dish-name dan harganya di #dish-price.
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.
Semua pelajaran di Dasar-Dasar Next.js
2Routing dan Tautan
Folder Menjadi RuteRute BertingkatMenautkan HalamanRute DinamisHalaman Tidak DitemukanRekap: Routing5Data di Server
Komponen AsinkronMenunggu Parameter RouteDua Pengambilan Data SekaligusStatus PemuatanMenangani errorRingkasan Pengambilan Data