页面元数据
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 14 课，共 47 课。
浏览器标签页、书签、Google 搜索结果、聊天中的链接预览：它们都会读取页面的 <title> 和 <meta> 标签。在 Next.js 中，你不需要手动编写这些标签。
相反，页面或布局会导出一个名为 metadata 的对象：
// app/menu/page.jsx
export const metadata = {
title: 'Our Menu',
description: 'Everything we cook.',
};
export default function Menu() {
return <h1>Our Menu</h1>;
}名称很重要：它必须完全是 metadata，并从路由文件中导出。Next.js 会在渲染时读取它，并为你写入 head。
元数据会沿树向下合并，顺序与布局相同，都是从外到内：根布局设置默认值，任何页面都可以覆盖这些默认值。没有导出 metadata 的页面会直接继承布局设置的内容，所以到目前为止，每个页面的调用都发生在根布局之后。
挑战
入门现在，Coddy Eats 的每个标签页都显示 Coddy Eats，因为根布局设置的就是这个标题。菜单页面应该有自己的标题。
- 在
app/menu/page.jsx中，在组件上方导出一个metadata对象。 - 将它的
title设置为Our Menu。
测试会读取 / 上的文档标题，然后导航到 /menu 并再次读取标题。
亲手试试
import './globals.css';
export const metadata = {
title: 'Coddy Eats',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
