Bước 9: Tìm kiếm trực tiếp

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

Thử thách

Trung bình

Hoàn thiện Coddy Eats với chức năng tìm kiếm trực tiếp.

Hoàn thiện tệp app/api/dishes/route.js bằng cách xuất async function GET(), chờ getDishes() rồi trả về Response.json(dishes).
Hoàn thiện tệp components/SearchBox.jsx với 'use client';, lưu chuỗi query và mảng matches trong state.
Hiển thị <input id="search-input" type="text"> được liên kết với query. Khi có thay đổi: nếu văn bản trống, hãy xóa các kết quả; nếu không, hãy gọi fetch('/api/dishes'), await response.json() và giữ lại các món ăn có name chứa văn bản đó, không phân biệt chữ hoa chữ thường.
Hiển thị <ul id="search-results" className="reviews"> với một <li> cho mỗi kết quả, bên trong có <Link> với id={'match-' + dish.slug}, href={'/menu/' + dish.slug}, rồi đến emoji, một dấu cách và tên món ăn.
Hiển thị <SearchBox /> bên trong phần hero trên app/page.jsx.

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