如何在 Next.js 13 中创建以下划线开头的路由路径

2次阅读

如何在 Next.js 13 中创建以下划线开头的路由路径

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 官方认可且稳定支持的“下划线路由逃生符”,兼顾规范性与灵活性。

text=ZqhQzanResources