Bước 8: Viết đánh giá

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 46 trên 47.

Thử thách

Trung bình

Cho phép mọi người đánh giá một món ăn.

Hoàn thiện tệp app/actions.js, bắt đầu bằng 'use server'; và xuất async function addReview(formData).
Đọc slug và text từ dữ liệu biểu mẫu, bỏ qua text rỗng, sau đó gọi await addReviewToDb(slug, text) và gọi revalidatePath('/menu/' + slug) từ next/cache.
Trong trang món ăn, gọi await getReviews(slug) và thêm một <section> bên dưới phần tử .detail.
Phần này chứa <form id="review-form" action={addReview}> với một ô nhập ẩn name="slug" chứa slug, một ô nhập văn bản id="review-input" name="text" và <button id="review-submit" type="submit">.
Bên dưới biểu mẫu, hiển thị <ul id="review-list" className="reviews"> với một <li> cho mỗi bài đánh giá, mỗi phần tử có id={'review-' + index}.

Tự làm thử

import Link from 'next/link';
import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <nav className="nav">
                    <Link className="brand" href="/">Coddy Eats</Link>
                    <Link id="nav-menu" href="/">Menu</Link>
                    <Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
                </nav>
                <div className="container">
                    {children}
                </div>
            </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