Chờ tham số của tuyến

Đường dẫn động chuyển phần URL cho trang của bạn thông qua params. Trong Next 15 có một điểm cần ghi nhớ:

params là một promise.

// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
    const { slug } = await params;
    // /menu/carbonara  ->  slug === 'carbonara'
}

Bỏ quên await cũng không gây lỗi, chính điều đó khiến lỗi này khó phát hiện. Giải cấu trúc một promise chỉ cho bạn undefined:

const { slug } = params;   // undefined
const dish = await getDish(slug);   // không tìm thấy gì

Trang vẫn hiển thị. Chỉ là trang trống hoặc toàn nội dung dự phòng, vậy mà bạn lại lục tìm lỗi trong lớp dữ liệu dù ở đó chẳng hề có lỗi.

Quy tắc tương tự cũng áp dụng cho searchParams. Cả hai đều là promise, cả hai đều cần được chờ bằng await và chỉ có trong các component máy chủ async, đây là thêm một lý do khiến trang bạn vừa viết phải là hàm bất đồng bộ.

Tại sao cần promise? Nhờ vậy, Next.js có thể bắt đầu hiển thị những phần trên trang không phụ thuộc vào URL trước khi xác định xong những phần có phụ thuộc vào URL.