如何使用Next JS的Head标签

Question

如何使用Next JS的Head标签

我刚刚开始为我的项目寻找 Next JS，但遇到了 Head 标签不起作用的问题。根据文档，我应该能够从 next/head 导入 head 并插入标题标签。但是，它对我不起作用，无论是使用导入到每个页面的布局组件还是直接注入它。

这是作为布局的代码（/components/layout.jsx）

import Link from 'next/link';
import Head from 'next/head';

export default function Layout({
    children,
    title = 'Default Title'
}) {
    return(
        <div>
            <Head>
                <title>{title}</title>
                <meta charSet='utf-8' />
                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></link>
            </Head>
            <nav>
                <div className='nav-wrapper'>
                    <ul class='right hide-on-med-and-down'>
                        <li>
                            <Link href='/'>
                                <a>Home</a>
                            </Link>
                        </li>
                        <li>
                            <Link href='/about'>
                                <a>About</a>
                            </Link>
                        </li>
                    </ul>
                </div>
            </nav>
            {children}
            
            {/* Footer to go in here */}

            <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        </div>
    )
}

Run Code Online (Sandbox Code Playgroud)

这是关于页面 (/pages/about.jsx)

import React from 'react';
import Layout from '../components/layouts';

function About() {
    return(
        <Layout>
            <div>
                <h1>Test Page</h1>
            </div>
        </Layout>
    );
}

export default About;

Run Code Online (Sandbox Code Playgroud)

它根本不起作用。标题未更新，如果我检查组件，我看不到我添加的任何内容。我原本以为是因为我自己设置了Next应用程序而做错了什么。但是，我尝试使用 npx create-next-app 引导它，并且看到了同样的问题。

任何帮助表示赞赏！

干杯

Answer 1

Nin*_*les 8

首先，创建一个新组件，例如。seo.jsx

import Head from "next/head";

const SEO = ({ pageTitle, pageDescription }) => (
    <Head>
        <title>{pageTitle}</title>
        <meta name="description" content={pageDescription} />
        ...
    </Head>
);

export default SEO;

Run Code Online (Sandbox Code Playgroud)

其次，导入到您的页面（例如home.jsx）：

import SEO from "@components/seo"; //change to your path 

const Home = () => {
    ...
    return (
        <div>
            <SEO pageTitle="Homepage" pageDescription="Welcome to my website" />

            ...
        </div>
    );
};

export default Home;

Run Code Online (Sandbox Code Playgroud)

在这种情况下，您将能够在应用程序的任何页面中更改title和description（或您需要的任何其他内容props），而不必担心meta key重复。

更多信息请点击这里。

Answer 2

Ram*_*kay 0

我获取了您的确切代码并创建了一个沙箱，如果您在导入中使用 .jsx，我可以看到标题按预期工作

从 '../components/layouts' 导入布局；

到 import Layout from '../components/layouts.jsx';

或者如果您想在没有扩展名的情况下使用，请.js改用

**代码沙箱 - ** https://codesandbox.io/s/vigorous-wind-4e035?file=/pages/index.js

下一个 JS 讨论- https://github.com/vercel/next.js/issues/2391#issuecomment-311735189

我没有对标题做任何特定的事情，只是为了使沙箱工作并打印文档标题。

我修改了没有文件夹和默认 IndexPage next沙箱的路径

修改Index为打印文档标题

不是进口 components/layout，是进口components/layout.jsx

当我尝试导入不带 JSX 扩展名的文件时，Codesandbox 崩溃了。

让我知道这是否有帮助，或者我们可以进一步探索！

归档时间：	5 年，4 月前
查看次数：	14256 次
最近记录：	3 年前