Favicon 在 Next.js _documents.js 中不起作用 [英] Favicon not working in Next.js _documents.js
问题描述
这是我 _document.js 中的代码:
This is the code in my _document.js:
import Document, { Head, Main, NextScript } from 'next/document';
<html lang="id">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="icon" type="image/x-icon" href="../static/favicon.ico" />
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</html>
我已经确认图标在我的根目录下的静态文件夹中:
I have confirmed that the favicon is in my static folder in my root directory:
我尝试将头部放在 index.js 中，移动公共文件夹中的图标，并使用不同的图标.在我的其他 Next.js 项目中，图标也不会加载.我在 Firefox、Edge 和 Chrome 中尝试过.这是怎么回事?
I've tried putting the head in index.js, moving the favicon in the public folder, and using a different icon. In my other Next.js projects, favicons also don't load. I've tried in Firefox, Edge, and Chrome. What's going on here?
推荐答案
Next.js 提供 public 文件夹中的静态文件(不能更改).您的代码可以从基本 URL (/) 开始引用其中的文件.
Next.js serves static files from the public folder (it can't be changed). Files inside it can be referenced by your code starting from the base URL (/).
在您的情况下，您需要将 static 文件夹重命名为 public，然后将 _document 中的图标引用为:
In your case you'll need to rename your static folder to public and then reference the favicon from your _document as:
<link rel="icon" type"image/x-icon" href="/favicon.ico" />
这篇关于Favicon 在 Next.js _documents.js 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
