Next.js中[id].js、[...id].js与[[...id]].js动态路由的区别

三类文件都是Next.js基于文件系统路由的动态路径约定，核心差异集中在匹配范围、参数格式两个维度，具体区别如下：

单段动态路由 [id].js #

• 匹配范围：仅能匹配URL中单个层级的路径段，多段、缺段都无法命中
• 示例：如果文件位于pages/blog/[id].js路径下，可以匹配/blog/123、/blog/nextjs-tutorial，但无法匹配/blog（缺动态段）、/blog/123/comment（多了路径段）
• 参数格式：页面中通过router.query读取到的id为字符串类型，比如访问/blog/123时，router.query.id的值为"123"

必选全匹配路由 [...id].js #

• 匹配范围：可以匹配1个及以上连续层级的路径段，不管后面接多少层路径都能命中，但无法匹配缺省动态段的父路由本身
• 示例：文件位于pages/blog/[...id].js路径下，可以匹配/blog/123、/blog/123/comment/456，但无法匹配/blog路径
• 参数格式：router.query读取到的id为字符串数组，数组顺序和URL路径段顺序完全对应。比如访问/blog/frontend/nextjs时，router.query.id的值为["frontend", "nextjs"]；访问/blog/123时，值为["123"]

可选全匹配路由 [[...id]].js #

• 匹配范围：是必选全匹配路由的可选版本，可以匹配0个及以上连续层级的路径段，连缺省动态段的父路由本身也能命中，是三类路由中匹配范围最广的
• 示例：文件位于pages/blog/[[...id]].js路径下，除了覆盖必选全匹配路由能命中的所有路径外，还可以直接匹配/blog根路径
• 参数格式：如果访问的是父路由/blog，router.query.id为空数组[]；如果携带路径段，返回值格式和必选全匹配路由一致，为对应顺序的字符串数组

补充路由优先级规则（避免多文件共存时匹配不符合预期）：
静态路由 > 单段动态路由[id].js > 必选全匹配路由[...id].js > 可选全匹配路由[[...id]].js
举个例子：如果pages/blog目录下同时存在top.js（静态路由）和[id].js（动态路由），访问/blog/top时会优先命中静态路由文件，不会走动态路由逻辑。

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