时间戳

首页 > 解决方案 > 我使用 next.js Head 元素错了吗？

next.js - 我使用 next.js Head 元素错了吗？

问题描述

尽我所能，我似乎无法让 Next.js 识别它自己的 Head 信息。它识别标题，但仅此而已。元数据或网站图标都无法渲染。这是一个单页应用程序。我在这里做明显错误的事情吗？

import React from 'react';
import App from '../components/App';
import Head from 'next/head';

class Index extends React.Component {
    render() {
        return (
            <div>

                <Head>
                    <title>My page title</title>
                    <link rel="icon" type="image/ico" href="../public/assets/favicon.ico"/>
                    <meta property="og:title" content="My page title" key="title" />
                </Head>

                <App></App>
                <style>
                    {`
                          html, body, #__next {
                            margin: auto;
                            margin-top: 0;
                            -webkit-font-smoothing: antialiased;
                            -moz-osx-font-smoothing: grayscale;
                            background-color: #282c34;
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                          }
                    `}
                </style>
            </div>
        )
    }
}

export default Index;

标签： next.jsfaviconhead

解决方案

我自己部分想通了。原来它是 google chrome 不想更新其缓存和不了解如何使用href="/image.ico". 我不清楚“/”是否植根于“公共”目录。幸运的是，我的网站图标现在可以工作了。但是，我似乎在这个过程中打破了标题。

推荐阅读