Next.js 动态路由模板答案

【问题标题】：Next.js dynamic route templateNext.js 动态路由模板
【发布时间】：2021-11-18 17:28:06
【问题描述】：

我想为我的 next.js 项目创建一个动态路由结构，所以主目录将是countries，并且该目录下会有许多其他国家/地区。

www.mysite.com/countries
www.mysite.com/countries/united-states
www.mysite.com/countries/france
www.mysite.com/countries/united-kingdom
....

在我的 pages 文件夹中，我创建了一个名为 countries 的文件夹并创建了一个文件 [...slug].js。我必须在countries 文件夹中创建一个文件index.js，以便www.mysite.com/countries 可以访问。

问题是index.js 和[...slug].js 具有相同的代码，我只想维护一个文件。如何配置 nextjs 以使用 [...slug].js 为 www.mysite.com/countries 及其下的任何子页面？

【问题讨论】：

【解决方案1】：

您只需将[...slug].js 更改为[[...slug]].js 即可捕获以countries 开头的所有路线。在 NextJs 中被视为可选的 URL 参数。
Official NextJs documentation 还表示：

可以通过将参数包含在双括号中来使捕获所有路由成为可选

【讨论】：