如何使用< Head>与nextJS [英] how to use <Head> with nextJS
问题描述
在将移动元标记添加到nextJS应用程序时遇到问题. 根据这里的文档，这应该工作 https://nextjs.org/docs#populating-head
I'm having problems getting mobile metatags into a nextJS app. According to the docs here, this should work https://nextjs.org/docs#populating-head
但是我看不到标题或我自己的任何meta属性都被渲染. 我所看到的是:
But I don't see the title or any of my own meta properties getting rendered. All I see is:
<!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head"/>
看起来像是默认类型.
import Link from 'next/link'
import Head from 'next/head'
import Header from '../components/Header'
import BaseLayout from '../components/BaseLayout.js'
const Index = () => (
<BaseLayout>
<Head>
<title>HSK App</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<Link href='/quizList'>
<h3>HSK Quiz App!</h3>
</Link>
</BaseLayout>
)
export default Index
帮助表示赞赏！
推荐答案
我无法重现此问题.自编写此问题以来，也许已修复了一个错误，但是文档确实指出了他们使用key属性来帮助Next.js跟踪元标记，并消除它们出现在父元素和子元素中的重复项.
I can't reproduce this problem. Maybe a bug was fixed since this question was written, but the documentation does point out they use a key attribute to help Next.js keep track of meta tags and eliminate duplicates when they appear in parent and child elements.
要避免在
head中使用重复的标签，可以使用key属性， 这样可以确保标记仅呈现一次，如 以下示例:
To avoid duplicate tags in your
headyou can use thekeyproperty, which will make sure the tag is only rendered once, as in the following example:
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta property="og:title" content="My page title" key="title" />
</Head>
<Head>
<meta property="og:title" content="My new title" key="title" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPage
这篇关于如何使用< Head>与nextJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
