第 9 步：实时搜索

本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 47 课，共 47 课。

挑战

中等

为 Coddy Eats 添加实时搜索功能。

完成文件 app/api/dishes/route.js，导出 async function GET()，等待 getDishes() 并返回 Response.json(dishes)。
完成文件 components/SearchBox.jsx，添加 'use client';，并在状态中保存一个 query 字符串和一个 matches 数组。
渲染与 query 绑定的 <input id="search-input" type="text">。文本变化时：如果文本为空，就清空匹配结果；否则，执行 fetch('/api/dishes')，等待 await response.json()，并保留名称包含该文本（不区分大小写）的菜品。
渲染 <ul id="search-results" className="reviews">，每个匹配项对应一个 <li>，其中包含一个 <Link>，并设置 id={'match-' + dish.slug}、href={'/menu/' + dish.slug}，内容依次为表情符号、空格和名称。
在 app/page.jsx 的 hero 区域内渲染 <SearchBox />。

亲手试试

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

Next.js 基础中的所有课

1为什么选择 Next.js

Next.js 带来了什么 App 文件夹你的第一个页面回顾：为什么选择 Next.js

4服务器与客户端

两种组件读懂错误 “use client”这一行缩小客户端部分客户端中的服务器回顾：服务器与客户端

7客户端导航

当前链接编程式路由使用 URL 筛选路由处理程序回顾：导航

3布局与元数据

根布局共享导航嵌套布局页面元数据动态元数据布局回顾

6服务端操作

什么是服务端操作能执行操作的表单读取表单数据刷新页面回顾：服务端操作