NextJS访问public目录文件遇404错误，求解决方案

问题背景 #

NextJS 14.0.4项目中，已在public目录创建.well-known/file.json结构，但访问my.domain.com/.well-known/file.json时返回404，需解决此问题以启用深度链接。项目文件结构：

|-- project
  |-- public
    |-- .well-known
      |-- file.json

解决步骤 #

1. 先验证本地开发环境访问情况 #

启动本地开发服务后，访问http://localhost:3000/.well-known/file.json：

• 如果本地也404，说明是NextJS配置问题；
• 如果本地能访问，问题出在部署环节。

2. 配置next.config.js确保静态资源被正确处理 #

在项目根目录的next.config.js中添加以下配置，确保.well-known路径的资源能被正确路由并设置响应头：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/.well-known/:path*',
        headers: [
          {
            key: 'Content-Type',
            value: 'application/json',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

配置完成后重启开发服务，再次测试访问。

3. 排查部署环节问题 #

如果本地正常但部署后404，检查以下点：

• 部署平台配置：比如Vercel/Netlify等平台，确认没有自定义路由规则（如rewrites）覆盖.well-known路径；
• 隐藏文件夹复制：确保部署脚本复制public目录时保留隐藏文件夹（比如用cp -a而非普通cp）；
• Git忽略规则：检查.gitignore是否排除了.well-known目录，若有则移除对应规则。

4. 基础校验 #

• 确认文件名拼写（包括大小写）完全正确，Linux服务器区分大小写；
• 验证file.json内容为有效JSON格式，避免因格式错误导致服务异常；
• 清除浏览器或CDN缓存，强制刷新页面加载最新资源。

内容的提问来源于stack exchange，提问作者Muhammad Usama Ashraf