如何将 favicon 添加到 Next.js 静态站点? [英] How to add a favicon to a Next.js static site?
问题描述
我正在尝试将图标添加到 Next.js 静态站点，但运气不佳.
我尝试使用 'next/document' 中的组件自定义文档https://nextjs.org/docs/#custom-document
指向 favicon.ico 文件的直接链接不起作用，因为该文件未包含在构建中，并且 href 未更新为 /_next/static/...
导入图像并添加到链接的 href 也不起作用(请参阅注释掉的行).
import React from 'react';从'next/document'导入文档，{ Html，Head，Main，NextScript }；//从 '../data/imageExports' 导入网站图标；导出默认类 MyDocument 扩展 Document {静态异步 getInitialProps(ctx) {const initialProps = 等待 Document.getInitialProps(ctx);返回 { ...initialProps };}使成为() {返回 (<HTML><头>{/* <link rel="快捷图标" href={favicon}/>*/}<link rel="快捷图标" href="../images/icons/favicon.ico"/></头><身体><主要/><下一个脚本/></身体></Html>);}}添加了网站图标链接，但它不显示.我希望它在我导入文件时可以工作，但它只是添加了一个 <link rel="shortcuticon" href="[object Object]"> 链接.
有人做过吗?
- 在项目根目录中创建一个
/static文件夹.这将被添加到静态导出文件夹中. - 在
/static文件夹中添加 favicon 文件. - 根据文档 (nextjs.org) 或 文档 (github.com).
- 将
<link rel="shortcut icon" href="/static/favicon.ico"/>添加到 head. npm run build &&npm 运行导出
附:感谢已删除的上一个答案.有效！
<小时>另一种方法是import Head 到你的根布局中并在那里添加链接.添加到 Head 的任何内容都会插入到文档的 head 标签中.
import Head from 'next/head';const Page = (props) =>(<头><link rel="快捷图标" href="/static/favicon.ico"/></头>//其他布局/组件</div>);导出默认页面；更新:
已弃用静态目录，取而代之的是公共目录.文档
所以，代码现在看起来像
import Head from 'next/head';const Page = (props) =>(<头><link rel="快捷图标" href="/favicon.ico"/></头>//其他布局/组件</div>);I'm trying to add a favicon to a Next.js static site without much luck.
I've tried customising the document with components from 'next/document'
https://nextjs.org/docs/#custom-document
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/...
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>
);
}
}
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.
Has anyone done this yet?
解决方案
- Create a
/static folder in project root. This will be added to the static export folder.
- Add favicon file in
/static folder.
- Add
_document.js to /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. Thanks to the previous answer that was deleted. It works!
Edit: 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;
Update :
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>
);
这篇关于如何将 favicon 添加到 Next.js 静态站点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
