
next.js 默认将以下划线(_)开头的文件夹视为私有目录,但可通过 url 编码 `%5f` 替代下划线来实现以 `_` 开头的公开路由,例如 `/shop/_t-shirt`。
在 Next.js 13 的 app router 中,以下划线开头的文件或文件夹(如 _t-shirt)会被自动排除在路由系统之外,这是为了支持「私有文件夹」机制(用于存放工具函数、配置、组件等非路由资源)。但如果你确实需要对外暴露形如 /shop/_t-shirt 这样的 URL 路径,Next.js 官方提供了明确的解决方案:使用 URL 编码形式 %5F 代替下划线 _。
✅ 正确做法如下:
在 app/ 目录下,按如下结构组织文件:
/app /shop /%5Ft-shirt ← 注意:文件夹名是 "%5Ft-shirt",不是 "_t-shirt" page.tsx
其中,%5F 是 ASCII 字符 _ 的 UTF-8 URL 编码(encodeURIComponent(‘_’) === ‘%5F’),Next.js 会自动将其解码并映射为实际路由 /shop/_t-shirt。
? 示例 page.tsx 内容:
// app/shop/%5Ft-shirt/page.tsx export default function TShirtPage() { return ( Welcome to the _t-shirt page
This route is accessible at: /shop/_t-shirt
); }
? 验证效果:
启动开发服务器后,访问 http://localhost:3000/shop/_t-shirt 即可正常渲染该页面 —— 浏览器地址栏显示的是语义化的 _t-shirt,而文件系统中使用 %5Ft-shirt 规避了私有目录限制。
⚠️ 注意事项:
- 不要混用 _ 和 %5F:例如 /_t-shirt 或 /%5F_t-shirt 均无效;
- 动态路由同理适用:如需 /shop/_t-shirt/[id],应写作 /shop/%5Ft-shirt/[id];
- 所有 %5F 必须严格小写(%5f 不被识别);
- 此方案仅适用于 App Router(app/ 目录),Pages Router(pages/)不支持该约定。
? 小技巧:可在代码中用 encodeURIComponent(‘_’) 动态生成,增强可读性与可维护性。
总之,%5F 是 Next.js 官方认可且稳定支持的“下划线路由逃生符”,兼顾规范性与灵活性。