If we want to load paths in Next.js with or without parameters and avoid redirection to a 404 page, we need to do the following:
First, we create our folder structure as needed. In this example:
/path/ [id].tsx
Inside our [id].tsx file is where we handle that ID and perform the desired operations.
This works for routes like: /path/1234
If we want it to work for routes like: /path/
We need to create a file called index.tsx in the same directory:
/path/ index.tsx [id].tsx
Remember that in index.tsx, you won’t receive the id parameter. In this case, you can take it as a 0 or whatever you need.
Finally, it will load /path/ without returning a 404 error.
