<头的使用方法>与 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
但我没有看到标题或我自己的任何元属性被渲染.我看到的是:
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"/>
这看起来像是某种默认值.
which looks like some type of default.
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
帮助表示赞赏！
推荐答案
NextJS 的 <Head> 组件似乎有点问题.
NextJS's <Head> component seems a bit buggy.
一方面，设置在不同组件中的两个 <Head> 标签有时会以非常奇怪的方式相互干扰.另一方面，有时将它放在页面组件中有效，有时则无效.而且规则似乎完全随机.
For one thing, two <Head> tags set in different components sometimes will interfere with each other in really bizarre ways. For another, sometimes having it in page components works, sometimes it doesn't. And the rules seems perfectly random.
唯一对我有用的是在 _document.js 中使用 <Head>.:/
The only thing that consistently worked for me is using <Head> in _document.js. :/
这篇关于<头的使用方法>与 nextJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
