Next.js 14（App Router）如何在根目录添加可访问文件？

解决方案：利用public目录+路由排查 #

Next.js的public目录是默认存放静态资源的位置，正常情况下放在这里的文件可直接通过根路径访问。针对你的问题，按以下步骤排查解决：

1. 确认文件放置位置 #

• 将simple.txt直接放在项目根目录的public文件夹内，路径为public/simple.txt，不要嵌套在public的子文件夹中，否则访问路径会变成/sub/simple.txt。
• 避免文件名包含特殊字符、空格，尽量使用小写字母，避免潜在的路由匹配异常。

2. 检查路由冲突 #

如果app目录下存在同名路由文件（比如app/simple/page.js），Next.js会优先匹配路由组件，导致静态文件无法访问。删除或重命名冲突的路由文件即可。

3. 配置路由重写（特殊场景） #

如果因需求限制无法将文件放在public根目录，可在next.config.js中添加路由重写规则，将根路径请求映射到目标文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/simple.txt',
        destination: '/你的文件实际路径/simple.txt',
      },
    ]
  },
}

module.exports = nextConfig

4. 重启开发服务器清除缓存 #

Next.js开发服务器会缓存静态资源，修改文件位置后需重启服务器才能生效：

npm run dev

5. 生产环境验证 #

部署后检查.next/public目录是否存在simple.txt，确保构建过程中public目录的文件被正确复制到输出目录。

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