姚利锋

Next.js项目中无法访问src目录文件的常见原因包括配置错误、路径引用问题或构建工具限制。本质在于Next.js默认文件结构约定与自定义配置冲突，需通过修改next.config.js或调整引用方式解决。典型场景涉及别名配置、静态资源处理或服务端渲染路径解析。解决方案可能包含设置正确的Webpack别名、使用public目录替代或启用实验性特性。

项目部署到 Vercel 无法访问非 Public 静态文件问题分析

最近项目部署到 Vercel 后只显示默认语言英文内容，但不想使用 MDX 方式，无法访问 src 目录下的 Markdown 文件，导致无法动态切换不同语言。

问题分析

在 Next.js 中，src/i18n/locales/xxxx.md 目录下的文件不会自动作为静态资源被包含在构建中
在 Vercel 部署环境中，这种直接读取文件系统的方式可能无法正常工作，因为:
- 构建时文件结构与运行时可能不同
- Serverless 函数环境中文件访问受限

解决方案

最简单的解决方案是将 Markdown 文件移动到 public 目录，这样它们会作为静态资源被包含在构建中，并可以通过 HTTP 请求访问。

步骤 1: 将 Markdown 文件移动到 public 目录

创建 public/locales/about 目录并将 Markdown 文件移动到那里:

mkdir -p public/locales/xxxxcp src/i18n/locales/xxxx.md
  复制代码

步骤 2: 使用 fetch 而不是 fs

修改 src/app/api/about/route.ts 文件:

const response = await fetch(`/locales/terms/${lang}.md`);
  复制代码

为什么这样解决有效

public 目录中的文件在构建时会被自动复制到输出目录，并在运行时可通过 URL 访问
使用 fetch 而不是 fs 模块来获取文件内容，这样在 Serverless 环境中也能正常工作
这种方法不需要修改 next.config.ts，因为 Next.js 已经默认处理 public 目录

如何解决Next无法访问src目录文件问题？

问题分析

解决方案

步骤 1: 将 Markdown 文件移动到 public 目录

步骤 2: 使用 fetch 而不是 fs

为什么这样解决有效