blitz-js / blitz-js/legacy-framework

Dynamic catch-all route also catches API routes

Open
#20 1 comment 0 reactions 0 assignees View on GitHub
kind/bug legacy-framework needs investigation status/triage
Dominant language
JavaScript
Stars
3
Forks
2
PR merge metrics
No merged PRs in 30d

Description

### What is the problem?

I have a catch-all route in the `pages` folder: `pages/[...params].tsx`. Now, when I have an anchor tag pointing to my api routes (e.g. `api/auth/google`) or if I do `Router.replace(/api/auth/google)` the catch-all route `pages/[...params].tsx` is triggered where `params=['api','auth','google']`. Manually entering `api/auth/google` in the browser however correctly triggers the API route.
Additionally, this issue seems to happen only in production (Vercel deployment).

### Paste all your error logs here:

No errors

### Paste all relevant code snippets here:

```
PASTE_HERE (leave the ``` marks)
```

### What are detailed steps to reproduce this?

1. Create `pages/[...params].tsx`
2. Create API route.
3. Deploy to production (Vercel).
4. Redirect to API routes using anchor tag or Router.

### Run `blitz -v` and paste the output here:

```
macOS Big Sur | darwin-x64 | Node: v16.3.0

blitz: 0.38.0 (global)
blitz: 0.39.0 (local)

Package manager: yarn
System:
OS: macOS 11.4
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Memory: 47.21 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm
Watchman: 2021.08.23.00 - /usr/local/bin/watchman
npmPackages:
@prisma/client: 3.1.1 => 3.1.1
blitz: 0.39.0 => 0.39.0
prisma: 3.1.1 => 3.1.1
react: 0.0.0-experimental-3310209d0 => 0.0.0-experimental-3310209d0
react-dom: 0.0.0-experimental-3310209d0 => 0.0.0-experimental-3310209d0
typescript: 4.3.4 => 4.3.4
```

### Please include below any other applicable logs and screenshots that show your problem:

_No response_

Contributor guide

Open the contributing guide

Research direction

Reproduce the production case with pages/[...params].tsx, an API route, an anchor link, and Router.replace, then compare those results with direct browser navigation. Trace how client-side routing resolves the API path and confirm the API route is selected instead of the catch-all page. Done means both anchor navigation and Router.replace reach the API route in the deployed production build.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
api, backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.