服务网站图标 next.js

Question

我正在使用样板Next.js starter。在中index.js，express 应用程序的一个实例被定义为expressApp。我只是试图使用我的网站图标来提供服务serve-favicon，但没有运气：

expressApp.use(favicon(path.join(__dirname, "static", "brand", "favicon.ico")));

检查正在解析的路径，它是正确的。next.js 的实现express有何不同？

Answer 1

注意此模块专门用于提供“默认的隐式图标”，即GET /favicon.ico. 对于需要 HTML 标记的其他供应商特定图标，需要额外的中间件来提供相关文件，例如serve-static。

所以这个包不可能在另一个路径中提供网站图标，因为这需要添加标记。要解决此问题，link请在pages/_document.js模板中添加一个标签：

<Head>
  <link rel="icon" type="image/x-icon" href="/brand/favicon.ico" />
</Head>

同时将您的serve-favicon代码保存在index.js文件中：

expressApp.use(favicon(path.join(__dirname, "static", "brand", "favicon.ico")));