如何将图标添加到Next.js静态站点? [英] How to add a favicon to a Next.js static site?
问题描述
我正在尝试在Next.js静态站点中添加一个网站图标，但运气不佳.
I'm trying to add a favicon to a Next.js static site without much luck.
我尝试使用'next/document'中的组件来自定义文档
https://nextjs.org/docs/#custom-document
I've tried customising the document with components from 'next/document'
https://nextjs.org/docs/#custom-document
直接链接到favicon.ico文件不起作用，因为该文件未包含在构建中，并且href不会更新为/_next/static/...
A straight link to the favicon.ico file doesn't work because the file isn't included in the build and the href doesn't update to /_next/static/...
导入图像并添加到链接的href也不起作用(请参见注释掉的行).
Importing the image and adding to the link's href doesn't work either (see commented out lines).
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]">链接.
The favicon links get added however it doesn't display. I'd expect it to work when I import the file, but it just adds a <link rel="shortcut icon" href="[object Object]"> link.
有人做过吗?
推荐答案
- 在项目根目录中创建一个
/static文件夹.这将被添加到静态导出文件夹中. - 在
/static文件夹中添加收藏夹文件. - 根据文档(nextjs.org)，将
_document.js添加到/pages/文件夹中或文档(github.com). - 将
<link rel="shortcut icon" href="/static/favicon.ico" />添加到头部. -
npm run build && npm run export
- Create a
/staticfolder in project root. This will be added to the static export folder. - Add favicon file in
/staticfolder. - Add
_document.jsto/pages/folder according to documentation (nextjs.org) or documentation (github.com). - Add
<link rel="shortcut icon" href="/static/favicon.ico" />to head. npm run build && npm run export
P.S.感谢已删除的上一个答案.可行！
P.S. Thanks to the previous answer that was deleted. It works!
另一种方法是导入Head 到您的根布局中，并在其中添加链接.添加到 Head 中的所有内容都会插入到文档的head标签中.
Another way is to do this is to import Head into your root layout and add the link there. Anything added to Head gets inserted into the document head tag.
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;
更新:
不推荐使用静态目录，而推荐使用public目录. 文档
The static directory has been deprecated in favor of the public directory. Doc
因此，代码现在看起来像
So, the code would now look like
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
// Other layout/components
</div>
);
这篇关于如何将图标添加到Next.js静态站点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
