Ôn tập: Lấy dữ liệu

Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 28 trên 47.

Thử thách

Trung bình

Tóm tắt chương: một thực đơn tải mọi thứ trên máy chủ.

lib/data.js đã có sẵn và bị khóa: getDishes() trả về một promise chứa mảng các đối tượng { id, name, price }, còn getDish(slug) tìm một đối tượng trong số đó.

Trong app/page.jsx, biến Home thành hàm async và dùng await getDishes() để gán kết quả cho biến dishes.
Bên trong <ul id="dish-list">, hiển thị một <li> cho mỗi món ăn, với key={dish.id}, id={dish.id} và tên món ăn name làm nội dung.
app/menu/[slug]/page.jsx hiển thị Unknown dish cho mọi URL: hàm này phân rã params mà không chờ giá trị. Hãy dùng await với params để thao tác tra cứu nhận được slug thực. Khi truy cập /menu/carbonara, #dish-name phải hiển thị Carbonara và #dish-price phải hiển thị giá của món ăn.

Tự làm thử

import './globals.css';

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

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

Tất cả bài học trong Kiến thức thiết yếu về Next.js

1Vì sao dùng Next.js

Next.js bổ sung gì Thư mục app Trang đầu tiên Ôn tập: Vì sao dùng Next.js

4Máy chủ và client

Hai loại thành phần Đọc lỗi Dòng 'use client'Giữ phần client nhỏ gọn Máy chủ bên trong client Tóm tắt: máy chủ và client

7Điều hướng phía máy khách

Liên kết đang hoạt động Điều hướng bằng code Lọc bằng URL Bộ xử lý tuyến đường Ôn tập: Điều hướng

3Bố cục và siêu dữ liệu

Bố cục gốc Điều hướng dùng chung Bố cục lồng nhau Siêu dữ liệu trang Siêu dữ liệu động Ôn tập: bố cục

6Server Actions

Server Action là gì Biểu mẫu có thể hoạt động Đọc dữ liệu biểu mẫu Làm mới trang Ôn tập: Server Actions