我正在尝试将网站图标添加到 Next.js 静态站点，但运气不佳。
我尝试使用以下组件自定义文档'next/document'
https://nextjs.org/docs/#custom-document https://nextjs.org/docs/#custom-document
指向 favicon.ico 文件的直接链接不起作用，因为该文件未包含在构建中，并且 href 未更新为/_next/static/...
导入图像并添加到链接的 href 也不起作用（请参阅注释掉的行）。
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
// import favicon from '../data/imageExports';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
{/* <link rel="shortcut icon" href={favicon} /> */}
<link rel="shortcut icon" href="../images/icons/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
图标链接已添加，但不显示。我希望它在导入文件时能够工作，但它只是添加了一个<link rel="shortcut icon" href="[object Object]"> link.
有人这样做过吗？
- 创建一个
/static项目根目录中的文件夹。这将被添加到静态导出文件夹中。
- 添加 favicon 文件
/static folder.
- Add
_document.js to /pages/文件夹根据文档 (nextjs.org) https://nextjs.org/docs/advanced-features/custom-document or 文档 (github.com) https://github.com/zeit/next.js/#custom-document.
- Add
<link rel="shortcut icon" href="/static/favicon.ico" />去头。
npm run build && npm run export
附：感谢之前的回答 https://i.stack.imgur.com/oEKzt.png那个被删除了。有用！
编辑：另一种方法是这样做进口头进入您的根布局并在那里添加链接。添加任何内容Head被插入到文档头标签中。
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/static/favicon.ico" />
</Head>
// Other layout/components
</div>
);
export default Page;
Update :
静态目录已被弃用，取而代之的是公共目录。Doc https://err.sh/zeit/next.js/static-dir-deprecated
所以，代码现在看起来像
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
// Other layout/components
</div>
);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
