I'm trying to achieve dynamic routing like this:
Example route: pages/[...slug].tsx
- example.com/first-page
- example.com/second-page
- example.com/any-page
The problem is that example.com/ is caught by pages/[...slug].tsx. And at the same time I need to have my example.com/ accessed through pages/index.tsx, as well as pages/404.tsx and any other route that is defined separately. For some reason, routes defined in pages/posts/index.tsx work fine, and are not falling under the slug dynamic routing, but 404 doesn't.
Right now the example.com/ gives "Too many redirects" because my slug is unable to properly handle this empty route, so it redirects to / or /404 just to repeat the cycle.
What I've tried
Trying to handle custom routes manually (with no luck, as they still lead to the same route)
Some deprecated next config parameters (concurrentFeatures)
Refactoring / to be a separate named page and rendering dynamically either slug or index
I am using T3 stack
*EDIT:
I should also mention that this problem is only happening on my server, running Docker container with Prisma MySQL database and NextJS. Locally, even with production build and yarn start, everything works as expected and routes are caught properly
*EDIT 2:
Here is a little more easy to grasp context: Page structure:
-/pages
index.tsx
[slug].tsx
somepage.tsx
-/login
index.tsx
Scenario:
LOCAL Local yarn build -> yarn start
- go to localhost:3000/ -> ✔
- go to localhost:3000/login -> ✔
- Go to localhost:3000/somepage -> ✔
- Go to localhost:3000/slugpage -> ✔
SERVER
Server is on DigitalOcean running Docker, CloudFlare also connected to domain.
Builds fine, pushes Prisma, next start -> No errors
- go to production.com/ -> 404 (Caught by /pages/[slug].tsx) <-- PROBLEM
- go to production.com/login -> ✔ (Doesn't get caught by same slug)
- go to production.com/somepage -> ✔
- go to production.com/slugpage -> ✔
Now, why would local production build & serve act differently than on the server?
