Krok 9: Wyszukiwanie na żywo

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

Wyzwanie

Średni

Dokończ Coddy Eats, dodając wyszukiwanie na żywo.

Uzupełnij plik app/api/dishes/route.js, eksportując async function GET(), która wywołuje getDishes() za pomocą await i zwraca Response.json(dishes).
Uzupełnij plik components/SearchBox.jsx, dodając 'use client'; oraz przechowując w stanie ciąg znaków query i tablicę matches.
Wyświetl <input id="search-input" type="text"> powiązany ze zmienną query. Po zmianie: jeśli tekst jest pusty, wyczyść pasujące wyniki; w przeciwnym razie wykonaj fetch('/api/dishes'), await response.json() i zachowaj te dania, których name zawiera tekst (bez uwzględniania wielkości liter).
Wyświetl <ul id="search-results" className="reviews"> z elementem <li> dla każdego pasującego wyniku, zawierającym element <Link> z id={'match-' + dish.slug}, href={'/menu/' + dish.slug} oraz emoji, spacją, a następnie nazwą.
Wyświetl <SearchBox /> wewnątrz sekcji hero w pliku app/page.jsx.

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