Menu
CoddyTech
Bắt đầu học

Bước 6: Thêm vào giỏ hàng

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

challenge icon

Thử thách

Dễ

Thêm nút giỏ hàng và giữ trang ở phía máy chủ.

  1. Hoàn thiện tệp components/CartButton.jsx, bắt đầu bằng 'use client';.
  2. Lưu count bằng useState(0). Hiển thị một <button id="add-to-cart" className="primary"> có nội dung Add to cart, nút này tăng giá trị khi được nhấp.
  3. Bên dưới, hiển thị <p id="cart-count" className="cart"> với nội dung là giá trị đếm, tiếp theo là x, rồi đến prop name, sau đó là in the cart, ví dụ 2 x Street Tacos in the cart.
  4. Trong app/menu/[slug]/page.jsx, hiển thị <CartButton name={dish.name} /> bên dưới giá. Không thêm 'use client' vào trang.

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 appTrang đầ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ỗiDòng 'use client'Giữ phần client nhỏ gọnMáy chủ bên trong clientTó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 codeLọc bằng URLBộ xử lý tuyến đườngÔn tập: Điều hướng

2Định tuyến và liên kết

Thư mục tạo thành tuyến đườngTuyến đường lồng nhauLiên kết các trangTuyến đường độngTrang không tìm thấyÔn tập: định tuyến

5Dữ liệu trên máy chủ

Thành phần bất đồng bộChờ tham số của tuyếnHai lần gọi dữ liệu cùng lúcTrạng thái tảiXử lý lỗiÔn tập: Lấy dữ liệu

8Dự án: Coddy Eats

Bước 1: Bộ khungBước 2: Lưới thực đơnBài học dự ánBước 3: Trang món ănBài học dự ánBước 4: Trạng thái tảiBài học dự ánBước 5: Tiêu đề trangBài học dự ánBước 6: Thêm vào giỏ hàngBài học dự ánBước 7: Bộ lọc danh mụcBài học dự ánBước 8: Viết đánh giáBài học dự ánBước 9: Tìm kiếm trực tiếpBài học dự án

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

Bố cục gốcĐiều hướng dùng chungBố cục lồng nhauSiêu dữ liệu trangSiê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ẫuLàm mới trangÔn tập: Server Actions