Adv*_*kar 2 favicon static-site next.js
我试图将一个favicon添加到Next.js静态站点，但运气不佳。
我尝试使用https://nextjs.org/docs/#custom-document中的组件自定义文档'next/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]">链接。
有人做过吗？
use*_*018 22
接受的答案很好，但可能值得指出的是，您无需修改即可_document.js添加收藏夹图标（也无需向 中添加任何标签head）。
我自己发现放置 favicon_app.js更有意义。该文件很可能已经存在，用于设置页面布局或类似内容。你可以在任何地方添加Head标签（参见文档）
所以我结束了 _app.js
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<Layout>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />
</Layout>
);
}
}
Vig*_*ran 21
只需将您的 favicon.ico 添加到 public 文件夹中，Next js 将自动为所有页面采用该 favicon。
无需在任何页面或标签中添加任何网站图标链接，无需为网站图标添加链接。
https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md
Bla*_*ack 11
仅添加 .ico 文件是不够的。
将链接标签添加到或 中的<Head>部分问题仅与 .ico 文件有关，但我建议添加不同的维度和格式以获得更好的支持。_document.jsx_document.tsx
import React from 'react';
import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render(): React.ReactElement {
return (
<Html>
<Head>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#ffc40d" />
<meta name="theme-color" content="#ffffff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
您可以使用RealFaviconGenerator生成不同的图标并将结果上传到/public/favicons/文件夹。/favicons/由于公共目录的性质，可以引用此文件夹。
/static在项目根目录中创建一个文件夹。这将被添加到静态导出文件夹中。/static文件夹中添加收藏夹文件。_document.js到/pages/文件夹。<link rel="shortcut icon" href="/static/favicon.ico" />到头上。npm run build && npm run exportPS感谢先前的答案已被删除（？）。有用！
编辑：另一种方法是将Head导入到根布局中，并在其中添加链接。添加到Head的所有内容都将插入到文档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;
小智 6
我必须做 favicon.src 才能使其工作
不起作用：
import favicon from '...'
...
<link rel="shortcut icon" href={favicon} />
作品：
import favicon from '...'
...
<link rel="shortcut icon" href={favicon.src} />
为了弄清楚这一点，我跑了一下console.log(favicon)，结果发现它是一个看起来像这样的对象：
{
height: 16,
src: "path/to/favicon.603d046c.ico"
width: 16,
}
小智 5
文件：_app.tsx
import { AppContext, AppProps } from "next/app";
import "../styles/common.scss";
import Head from 'next/head';
//For me it didn't work without the following import...
import favico from "../static/favicon.ico";
function MyApp({ Component, pageProps }: AppProps) {
const csrfToken = pageProps["anti-csrftoken-a2z"];
return (
<div>
<Head>
<link rel="shortcut icon" href={favico} type="image/x-icon" />
</Head>
<Component {...pageProps} />
</div>
);
}
MyApp.getInitialProps = async ({ Component, ctx }: AppContext) => {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
};
export default MyApp;
2023 年 5 月/NextJS 13 更新：
添加favicon.ico到您的/app文件夹。NextJS 会自动为其生成适当的代码<head>。
您还可以将icon.(ico|jpg|jpeg|png|svg), 或apple-icon.(jpg|jpeg|png|svg)文件添加到根段。
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
| 归档时间： |
|
| 查看次数： |
1934 次 |
| 最近记录： |