路由处理程序
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 37 课，共 47 课。
服务器组件已经在服务器上运行，因此能满足大多数数据需求。但有时浏览器需要在稍后请求数据，比如点击之后，或搜索框输入稳定之后。为此，你需要一个可供调用的端点。
包含 route.js 的文件夹会映射到对应的路由。路由规则与页面相同，只是使用了不同的特殊文件：
app/
api/
dishes/
route.js -> /api/dishes在文件内部，你会导出一个以 HTTP 方法命名的函数：
import { dishes } from '../../../lib/dishes.js';
export async function GET() {
return Response.json(dishes);
}Response.json(...) 是完整的响应：它会序列化该值，并设置 JSON 内容类型。你也可以在同一个文件中导出 POST、PUT 和 DELETE。
然后，客户端部分就是普通的浏览器代码：
const res = await fetch('/api/dishes');
const data = await res.json();有两点要记住。一个文件夹可以包含 page.jsx 或 route.js，不能同时包含两者：它们会声明同一个 URL。而且 route.js 不是组件：它返回的是 Response，而不是 JSX。
当浏览器需要按需获取数据，或者你的应用之外的内容需要调用它时，就使用路由处理程序。如果服务器组件在渲染时可以直接读取数据，就让它直接读取。
挑战
中等构建一个小型 API，并从浏览器调用它。
- 在
app/api/dishes/route.js中，导出一个async function GET，让它以 JSON 格式返回dishes。 - 在
components/DishLoader.jsx中，完成loadDishes：获取/api/dishes，读取 JSON 请求体，并使用setNames保存菜品名称。
点击 #load-btn 后，必须将全部四个名称填入 #dish-list。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
