Next.js dynamic route template

Question

I want to create a dynamic route structure for my next.js project, so the main directory would be countries and there will be many other countries under that directory.

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

In my pages folder, I create a folder called countries and created a file [...slug].js. I have to create a file index.js inside the countries folder for www.mysite.com/countries to be accessible.

The issue is that index.js and [...slug].js have the same code, and I want to have only 1 file to maintain. How can I configure nextjs to use [...slug].js for www.mysite.com/countries and any sub pages under it?

FaSh · Accepted Answer · 2021-09-26 12:10:13Z

3

You can simply change [...slug].js to [[...slug]].js to catch all routes starting with countries. It is treated as optional URL parameters in NextJs.
Official NextJs documentation also said that:

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

answered Sep 26, 2021 at 12:10

FaSh

1199 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rain Man Over a year ago

thanks, that did it, I dont know how I missed it

Collectives™ on Stack Overflow

Next.js dynamic route template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related