I created a next.js project with the default library command, and renamed the example file page.tsx
as [...path].js
. According to the documentation, this should catch all routes, but it doesn't.
The app is exactly the default one created by the library command npx create-next-app@latest
.
I've tried moving the catchall file to a directory called "pages" in the root directory, creating the "pages" folder inside the "app" directory, and just moving it to that directory directly without a "pages" directory.
How are you supposed to do it?
This is something that is confusing everybody in the NextJS world! In the new version of NextJS, a new file-based routing system has been introduced called app router. Before that, we were using the pages router. Differences are their layout systems, API route implementations, and rendering patterns.
To have a catch-all route in the app router, you must use the [...path]
name convention on the folder's name, NOT the .js file's name, so it would be like this: /app/[...path]/page.js
. You can find more information in the official documentation.
But if you want the pages router (not recommended in version 13 anymore), you can do just like what you already did: /pages/[...path].js
.
I hope that helps. Feel free to ask if you need more explanation.