favicon - 如何将 favicon 添加到 Next.js 静态站点？-6ren

favicon - 如何将 favicon 添加到 Next.js 静态站点？

转载作者：行者123 更新时间：2023-12-03 07:29:18

114

4

我正在尝试将 favicon 添加到 Next.js 静态站点，但运气不佳。

我尝试使用 'next/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]">关联。

有人做过吗？

最佳答案

创建 /static项目根目录中的文件夹。这将被添加到静态导出文件夹中。

在 /static 中添加网站图标文件文件夹。

添加 _document.js至/pages/根据 documentation (nextjs.org) 的文件夹或 documentation (github.com) .

添加 <link rel="shortcut icon" href="/static/favicon.ico" />头。

npm run build && npm run export

附言感谢 previous answer那被删除了。有用!

编辑:另一种方法是将 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;

更新:

已弃用静态目录，取而代之的是公共(public)目录。 Doc

所以，代码现在看起来像

import Head from 'next/head';

const Page = (props) => (
  <div>
    <Head>
      <link rel="shortcut icon" href="/favicon.ico" />
    </Head>
    // Other layout/components
  </div>
);

关于favicon - 如何将 favicon 添加到 Next.js 静态站点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56213019/

114

4

0

文章推荐： sql - 从使用(WHERE)条件选择的行中获取上一行和下一行

文章推荐： ruby-on-rails - 将 Rails 升级到 6，出现阻塞主机错误

java - 如何修改a的字段的字段....如link.next.next.next(.next*n) n次
这个问题已经有答案了: How to modify a public field of a field of a field… As in link.next.next.next(.next*n) n
java - 如何修改一个字段的一个公共(public)字段...如link.next.next.next(.next*n) n次
我有一个保存链接的数组。每个链接都有一个名为 next 的公共(public)字段，它可以保存另一个链接，该链接可以保存更多链接等。当我想删除东西时我可以做 array[x].next = array
javascript - Koa中，中间件中的await next()、return await next()、return next()、next()有什么区别？
文档概述了在中间件中使用“await next()”的用例，导致中间件暂停并触发下游的下一个中间件，直到所有中间件都执行完毕，此时上游级联将开始并且中间件将完整执行。如果用户想要缩短级联，那么单独写“
next.js - 将 next 的输出文件夹从 "_next"重命名为 "next"
我今天遇到了一个用例，我试图让我的 nextjs 应用程序在 android webview 中工作，不幸的是 android 不解析以 _next 开头的路径并且我的大部分块文件都在_next/st
javascript - 使用 .eq(3) 而不是 .next().next().next()
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
next.js - next.js 中的 apollo-client with `next-with-apollo` VS next.js 文档常见问题解答中显示的方法(不使用 `getDataFromTree` )
next-with-apollo npm 库和 the approach shown in next.js docs 中选择的“next.js 中的 apollo-client”方法对比. next.
next.js - 如何使用 next-auth 在 Next.js 中实现凭据授权？
我尝试使用 next-auth 获取凭据身份验证，但我没有使用它的经验，无论我做什么，我都会收到以下消息:[next-auth][error][callback_credentials_jwt_err
next.js - 如何使用 next.js 和 next-i18next 本地化路由？
更改语言时需要更改路线名称。例如，我有一条路线 /en/career但是当我改成捷克语时，我需要一条路线 /cs/kariera .基本上我需要本地化 URL。现在，当我在 /en/career 上时
jQuery(this).find ('title' ).next().next().next().eq(0).text();?
更好/优雅的方法是什么？ jQuery(this).find('title').next().next().next().eq(0).text(); //THIS WORKS 我尝试使用 jQuery
java - 链表中的节点、node.next 和 node.next.next 是什么？
我只是对 node 感到好奇。 node.next 和 node.next。到目前为止，我们已经了解到节点有两个部分，其中存储数据和下一个节点的地址(node.next)，然后是 node.next.
javascript - jQuery: "$(this).next().next()"有效，但 "$(this).next(' .div')"无效
好的，我正在尝试单独隐藏这组信息。这有效: $(".arrow").click(function() { $(this).next().next().slideToggle(); }); Mo
deployment - Next.js 中的 `next export` 和 `next build` 有什么区别？
我开发了一个 Web 应用程序，它使用 Nextjs 应用程序作为前端和一个 Python (Django) API 服务器作为后端。我的大多数前端页面都有对后端服务器的 API 调用(在 Compo
protecting routes in next js with middleware + next-auth(使用中间件+Next-auth保护Next JS中的路由)
如果我没有通过身份验证，我正在尝试使用NextJS中间件保护一些路由，我正在使用Next-auth进行身份验证，从文档中看，这就是MIDDLEWAR.TS文件应该是什么样子。Rn的问题是，即使当我通过
javascript - 在 next.config.js 中同时添加对 next-css 和 next-less 的支持
我正在使用 nextJs，需要添加对 less 和 css 的支持。我想要一个项目同时拥有 next-css 和 next-less 。但它一次接受一个。这是我正在使用的 const withCSS
typescript - 不支持通过 'next.config.ts' 的错误 : Configuring Next. js。请将文件替换为 'next.config.js'
我正在构建下一个项目的 typescript 。如果我将此配置文件保留为 next.config.js , 我在 tsconfig.json 收到警告说“找不到next.config.ts”。所以 t
django - 无法解析 ?next= 值来自 http ://login/? next=/my_page/使用 request.GET.get ('next' ,'' )
我有一个自定义登录网址/ View /模板。我对页面使用 @login_required 装饰器(让称为 my_page) 需要登录。试图访问 my_site.com/my_page 正确调用 my
ruby - 为什么 Ruby 中的 `next` 方法会引发 SyntaxError 而 `next!` 或 `self.next` 不会在猴子修补 String 类时引发语法错误？
下面的代码工作正常: class String def foo next! end end puts 'hh'.foo # hi 这个也很好用: class String d
Next-auth session immediately becomes unauthenticated after successful login in a Next.js app(成功登录到Next.js应用程序后，Next-auth会话立即变为未经身份验证)
我在我的Next.js应用程序中使用Next-auth进行身份验证。成功登录后，我立即被重定向到登录页面，表明该会话已变为未经身份验证。。相关代码片段：。_app.tsx：。Layout.tsx：。L
next.js - Next js中具有多个参数的动态路由 - 文件结构
我想在 nextjs 中创建动态页面以匹配以下路由 users/[user]/[dashboard]。我的文件结构 pages/ users/ -[user].js // will
next.js - 如何设置 next.js？
我直接按照官网的步骤操作: https://nextjs.org/docs/ 第一步。 npm install --save next react react-dom 步骤 2. 将脚本添加到 pac

首页

博学

6Ren·AI

商城

favicon - 如何将 favicon 添加到 Next.js 静态站点？