Next.js调整配置后无法读取public文件夹下favicon.ico问题求助

问题排查与解决方案 #

• 首先修复JSX注释错误：你当前在<Head>组件内写的// 无法找到该图标属于非法的JSX注释格式，JSX内的单行注释必须包裹在{/* */}中，否则这段注释会被当作无效节点干扰link标签的正常注入，修改后代码示例如下：

import "styles/globals.css";
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  console.log("My app");
  return (
    <>
      <Head>
        <title>Test</title>
        <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
        {/* 注释内容需要用该格式书写 */}
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

• 排除浏览器缓存问题：favicon属于浏览器强缓存的资源，你可以直接给图标路径加版本号强制拉取新资源，比如把href属性值改为/images/favicon.ico?v=1，再硬刷新页面（Windows按Ctrl+F5，Mac按Cmd+Shift+R）即可。
• 验证标签是否注入成功：打开浏览器开发者工具的「元素」面板，查看页面head节点中是否存在你写的favicon对应的link标签，如果不存在就是注释导致的注入失败，修改完注释即可解决。
• jsconfig.json的baseUrl配置仅影响代码导入路径，和public下静态资源的访问路径完全无关，该配置不会导致当前问题。

内容的提问来源于stack exchange，提问作者goscamp