Passaggio 9: Ricerca in tempo reale
Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 47 di 47.
Sfida
MedioCompleta Coddy Eats con una ricerca in tempo reale.
- Completa il file
app/api/dishes/route.jsesportandoasync function GET(), che attendegetDishes()e restituisceResponse.json(dishes). - Completa il file
components/SearchBox.jsxcon'use client';, mantenendo nello stato una stringaquerye un arraymatches. - Visualizza
<input id="search-input" type="text">collegato aquery. Al cambio: se il testo è vuoto, svuotamatches; altrimentifetch('/api/dishes'),await response.json()e mantieni i piatti il cuinamecontiene il testo (senza distinzione tra maiuscole e minuscole). - Visualizza
<ul id="search-results" className="reviews">con un<li>per ogni corrispondenza, contenente un<Link>conid={'match-' + dish.slug},href={'/menu/' + dish.slug}e l’emoji, uno spazio, poi il nome. - Visualizza
<SearchBox />all’interno dell’hero inapp/page.jsx.
Provalo tu
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>
);
}Tutte le lezioni di Nozioni essenziali di Next.js
4Server e Client
Due tipi di componentiLeggere l'erroreLa riga 'use client'Mantieni piccole le parti ClientServer dentro ClientRiepilogo: Server e Client7Navigazione lato client
Il link attivoRouting programmaticoFiltrare con l'URLGestori delle routeRiepilogo: navigazione2Routing e collegamenti
Le cartelle sono routeRoute annidateCollegare le pagineRoute dinamichePagine non trovateRiepilogo: routing5Dati sul server
Componenti asincroniIn attesa dei parametri della routeDue fetch contemporaneiStati di caricamentoGestione degli erroriRiepilogo: recupero dei dati8Progetto: Coddy Eats
Passaggio 1: La struttura
Passaggio 2: La griglia del menuPassaggio 3: Le pagine dei piattiPassaggio 4: Stato di caricamentoPassaggio 5: Titoli delle paginePassaggio 6: Aggiungi al carrelloPassaggio 7: Filtro per categoriaPassaggio 8: Lascia una recensionePassaggio 9: Ricerca in tempo reale