Nextjs 动态页面路由：在页面变量中使用扩展运算符 [...example] 或 [[...example]] 的目的是啥？

Posted 2023-02-22

【中文标题】Nextjs 动态页面路由：在页面变量中使用扩展运算符 [...example] 或 [[...example]] 的目的是啥？

【英文标题】：Nextjs dynamic page routes: What is the purpose of using the spread operator [...example] or [[...example]] in a page variable?Nextjs 动态页面路由：在页面变量中使用扩展运算符 [...example] 或 [[...example]] 的目的是什么？

【发布时间】：2021-07-09 06:41:01

【问题描述】：

我目前正在学习Nextjs 框架。我想说我已经牢牢掌握了这些概念，但仍有一些事情我不确定。其中之一是动态页面中的扩展运算符[...var] 或[[...var]] |路由文件名。

例如来自next/auth docs的这一行：

pages/api/auth/[...nextauth].js

是否有一些具体的用例（使用getStaticPaths() 无法实现），还是只是我不知道的命名约定？

【参考方案1】：

pages/api/auth/[...nextauth].js 是一个catch-all route，这意味着它将匹配/api/auth/a，但也匹配/api/auth/a/b、/api/auth/a/b/c 等等。

[[...nextauth]].js 将是 optional catch all route。因此，除了上面的常规 catch-all 路由之外，它还将匹配 /api/auth。

【讨论】：

哎呀，我完全错过了文档部分。谢谢。