NextJS 13.4.7使用src目录后[lang]路由失效问题咨询

问题根源：目录结构错误 #

你当前的目录结构不符合NextJS对src目录的要求，导致路由解析异常。NextJS中src目录作为项目源码根目录时，app路由目录必须直接放在src目录下，而不是将app/[lang]/的内容单独移入src。正确结构应该是：

项目根目录/
├─ src/
│  ├─ app/
│  │  ├─ [lang]/
│  │  │  ├─ page.tsx
│  │  │  └─ layout.tsx
│  └─ middleware.ts （如果使用src目录存放middleware）
├─ next.config.js
└─ package.json

你之前的操作可能是把[lang]/直接放到了src下，而非src/app/下，这就导致NextJS将src视为路由的一部分，只有访问/src/[lang]才能匹配到页面。

Middleware的位置要求 #

负责本地化的middleware.ts（或.js）必须放在项目根目录，或者src目录的根层级（与src/app/同级），不能放在app目录或其子目录下。如果你之前的middleware在项目根目录，现在切换到src结构，需要将它移到src目录下，确保和src/app/同级，这样才能正常拦截所有路由请求。

修复步骤 #

• 调整目录结构：将[lang]/目录移动到src/app/下，确保路径为src/app/[lang]/page.tsx和src/app/[lang]/layout.tsx。
• 迁移middleware文件：如果原middleware在项目根目录，将其移至src/middleware.ts；如果原本就在src下，确保它和src/app/同级。
• 检查next.config.js配置：确认配置中没有设置basePath: '/src'，这个配置会强制所有路由前缀为/src，导致你只能通过/src/[lang]访问页面。如果有这个配置，删除它。
• 彻底清理缓存并重启：删除.next文件夹和node_modules/.cache（如果存在），执行npm run dev重启开发服务器。

完成以上步骤后，访问/[lang]（比如/en）应该就能正常匹配路由，不再出现404错误。

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