Krok 6: Dodawanie do koszyka

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 44 z 47.

Wyzwanie

Łatwy

Dodaj przycisk koszyka i pozostaw stronę po stronie serwera.

Uzupełnij plik components/CartButton.jsx, zaczynając od 'use client';.
Przechowuj count w useState(0). Wyświetl przycisk <button id="add-to-cart" className="primary"> z tekstem Add to cart, który zwiększa tę wartość po kliknięciu.
Poniżej wyświetl <p id="cart-count" className="cart"> z wartością licznika, następnie x, potem właściwością name, a na końcu in the cart, na przykład 2 x Street Tacos in the cart.
W pliku app/menu/[slug]/page.jsx wyświetl <CartButton name={dish.name} /> pod ceną. Nie dodawaj 'use client' do strony.

Spróbuj swoich sił

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>
    );
}

Wszystkie lekcje w sekcji Podstawy Next.js

1Dlaczego Next.js

Co dodaje Next.js Folder app Twoja pierwsza strona Podsumowanie: Dlaczego Next.js

4Serwer i klient

Dwa rodzaje komponentów Odczytywanie błędu Linia „use client”Ograniczaj części klienckie Serwer wewnątrz klienta Podsumowanie: serwer i klient

7Nawigacja po stronie klienta

Aktywny link Routing programowy Filtrowanie za pomocą URL Obsługa tras Podsumowanie: nawigacja

3Układy i metadane

Układ główny Wspólna nawigacja Zagnieżdżone układy Metadane strony Dynamiczne metadane Podsumowanie: układy

6Akcje serwerowe

Czym jest akcja serwerowa Formularze, które działają Odczytywanie danych formularza Odświeżanie strony Podsumowanie: akcje serwerowe