Nextjs dynamic page routes: What is the purpose of using the spread operator [...example] or [[...example]] in a page variable?

Question

I am currently learning the Nextjs framework. I would say I have a solid grasp of the concepts already, but there are still a few things I am not sure about. One of those things is the spread operator [...var] or [[...var]] in a dynamic page | route file name.

For example this line from next/auth docs:

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

Is there some concrete use case (that can't be achieved using getStaticPaths()), or is it just a naming convention which I don't know about?

Answer 1

pages/api/auth/[...nextauth].js is a catch-all route which means that it will match /api/auth/a but also /api/auth/a/b, /api/auth/a/b/c and so on.

[[...nextauth]].js would be an optional catch all route. So in addition to the regular catch-all route above it would also match /api/auth.