Next.js: 用自定义标签填充head标签

709 阅读1分钟

如何定制你的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也会负责删除这些标签。