next 标签_Next.js:使用自定义标签填充head标签

next 标签

From any Next.js page component, you can add information to the page header.

您可以从任何Next.js页面组件向页面标题添加信息。

This is handy when:

在以下情况下方便使用:

  • you want to customize the page title

    您要自定义页面标题
  • you want to change a meta tag

    您想更改一个元标记

How can you do so?

你该怎么做?

Inside every component you can import the Head component from next/head and include it in your component JSX output:

在每个组件内部,您可以从next/head导入Head组件,并将其包含在组件JSX输出中:

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

You can add any HTML tag you’d like to appear in the <head> section of the page.

您可以添加任何想要显示在页面<head>部分HTML标记。

When mounting the component, Next.js will make sure the tags inside Head are added to the heading of the page. Same when unmounting the component, Next.js will take care of removing those tags.

在安装组件时,Next.js将确保Head内的标签已添加到页面标题。 与卸载组件相同,Next.js将负责删除这些标记。

翻译自: https://flaviocopes.com/nextjs-customize-head/

next 标签

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值