如何定制你的Next.js应用程序的`head`标签
在任何Next.js页面组件中,你都可以向页面标题添加信息。
这在以下情况下是很方便的。
- 你想自定义页面的标题
- 你想改变一个元标签
你如何做到这一点?
在每个组件里面,你可以从next/head ,并在你的组件JSX输出中包括Head 。
import Head from 'next/head'
const House = props => (
<div>
<Head>
<title>The page title</title>
</Head>
{/* the rest of the JSX */}
</div>
)
export default House
你可以添加任何你想出现在页面<head> 部分的HTML标签。
当安装该组件时,Next.js将确保Head 里面的标签被添加到页面的标题中。当卸载组件时,Next.js也会负责删除这些标签。