Next.js 动态路由模板

Question

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

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

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

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

Answer 1

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

Catch all routes can be made optional by including the parameter in double brackets

Next.js dynamic route template