Question

我才刚刚开始为我的项目查看Next JS，但是Head标签不起作用。根据{{3}}，我应该能够从next / head导入head并插入title标签。但是，它不适用于我，无论是使用导入到每个页面的Layout组件还是直接将其注入。

以下是作为布局的代码（/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>
    )
}

这是关于页面（/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;

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

感谢您的帮助！

欢呼

Answer 1

我获取了您的确切代码并创建了一个沙箱，并且可以看到标题按预期工作只要您在导入中使用.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崩溃了。

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

如何使用Next JS的Head标签

1 个答案: