Langkah 9: Pencarian Langsung
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 47 dari 47.
Tantangan
SedangSelesaikan Coddy Eats dengan pencarian langsung.
- Lengkapi file
app/api/dishes/route.jsdengan mengeksporasync function GET()yang menunggugetDishes()dan mengembalikanResponse.json(dishes). - Lengkapi file
components/SearchBox.jsxdengan'use client';, yang menyimpan stringquerydan arraymatchesdalam state. - Tampilkan
<input id="search-input" type="text">yang terhubung kequery. Saat terjadi perubahan: jika teks kosong, hapus semua kecocokan; jika tidak,fetch('/api/dishes'),await response.json(), lalu pertahankan hidangan yangname-nya memuat teks tersebut tanpa membedakan huruf besar dan kecil. - Tampilkan
<ul id="search-results" className="reviews">dengan satu<li>untuk setiap kecocokan, yang berisi<Link>denganid={'match-' + dish.slug},href={'/menu/' + dish.slug}, dan emoji, spasi, lalu nama. - Tampilkan
<SearchBox />di dalam hero padaapp/page.jsx.
Coba sendiri
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>
);
}