Page with slug or id doesnt work

[febeeh]

Summary

Hi,
I was working in a eCommerce project. everything were working perfect. suddenly when i restart the server the problem started.
page with dynamic route ( name containing [] ) stopped working. when i tried to find the issue. nothing make sense. When i ever i tried to visit dynamic route page, it return 404 in loading its chunks file. The fun part is, its not redirected to 404 page. So first of all i checked if static/chunks/pages/[slug] or static/chunks/pages/[id] were created. All files are there in the folder. But when it comes to dynamic route page. it shows 404 in loading files and not redirected to 404 custom page.

Page without dynamic route working perfect. this happen when i run custom server with production. I am running custom server in my cpanel account. If any one has any idea, please help me out.

Thank you

Additional information

No response

Example

No response

[FINDarkside]

Did you find any fix to this? I'm having the same issue, it's possibly caused by some nextjs update. Just to add some further context:

• I have SSR setup and the page is rendered fine on backend, on frontend the page bundle doesn't load
• I've confirmed that the requested bundle does exists on the server, but nextjs still responds with 404.
• Everything works fine locally after npm run build && npm start

We have nginx in front of the site in prod, but we haven't changed anything regarding that for long time.

[febeeh]

Ya i found the solution, i downgraded to 13.3.0 and everything started working perfect.

[FINDarkside]

Many thanks for the tip I'll try it out!

[vianch]

I've downgraded to 13.3.0 and it worked for me !!
Thanks

[febeeh]

Found the solution, just downgrade to 13.3.0

[maybephilipp]

Some investigation results:

I have a Next.js server behind nginx proxy. When I go to server and curl next.js directly with path: http://www:3000/_next/static/chunks/app/bla/%5Bslug%5D/page-4acf3cbdab72937d.js, then it works.

www is a virtual host of next.js container inside docker-compose.

If I request nginx, then I get 404. In nginx-debug logs I see the following:

prod-ngx-1  | "GET /_next/static/chunks/app/bla/[slug]/page-4acf3cbdab72937d.js HTTP/1.0
prod-ngx-1  | Host: www:3000
prod-ngx-1  | Connection: close
prod-ngx-1  | Cache-Control: max-age=0
prod-ngx-1  | sec-ch-ua: "Not/A)Brand";v="99", "Google Chrome";v="115", "Chromium";v="115"
prod-ngx-1  | sec-ch-ua-mobile: ?0
prod-ngx-1  | sec-ch-ua-platform: "macOS"
prod-ngx-1  | DNT: 1
prod-ngx-1  | Upgrade-Insecure-Requests: 1
prod-ngx-1  | User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36
prod-ngx-1  | Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
prod-ngx-1  | Sec-Fetch-Site: same-origin
prod-ngx-1  | Sec-Fetch-Mode: navigate
prod-ngx-1  | Sec-Fetch-User: ?1
prod-ngx-1  | Sec-Fetch-Dest: document
prod-ngx-1  | Accept-Encoding: gzip, deflate, br
prod-ngx-1  | Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,ru;q=0.7

So as u can see, it requests correct url, everything ok, but %5Bslug%5D became [slug]. Idk if it's the issue, but seems to be the case. I don't have time to investigate further for now. Thanks.

[maybephilipp]

Sadly, can't downgrade 😭😭😭 @apollo/experimental-nextjs-app-support, which I use, depends on ^13.4.1 next

[maybephilipp]

Yeah. Tested again – not with curl but axios.

await axios.get('http://www:3000/_next/static/chunks/app/simulations/%5Bslug%5D/page-73c1149b64fa05f0.js')

^ Gives correct JS with 200 OK.

await axios.get('http://www:3000/_next/static/chunks/app/simulations/[slug]/page-73c1149b64fa05f0.js')

^ Gives 404 Not found.

The HTTP headers are also different:

GET /_next/static/chunks/app/simulations/%5Bslug%5D/page-73c1149b64fa05f0.js HTTP/1.1\r\n

vs

GET /_next/static/chunks/app/simulations/[slug]/page-73c1149b64fa05f0.js HTTP/1.1\r\n

So I think the true issue of this is nginx that removes escaping from the url.

I will try to change nginx version now.

[maybephilipp]

Finally fixed it using "magic" rewrite rules.

That's bug/strange nginx behaviour that (seems) they are not planning to fix. Nginx decodes url before passing to proxy if proxy url has path.

For reference:

• https://serverfault.com/questions/459369/disabling-url-decoding-in-nginx-proxy
• https://trac.nginx.org/nginx/ticket/262
• https://trac.nginx.org/nginx/ticket/1930

I fixed it by changing

    location ^~ /_next/static {
        add_header Cache-Control "public, max-age=3600, immutable";

        resolver 127.0.0.11 ipv6=off valid=10s;
        proxy_pass http://www:3000/_next/static;
    }

to

    location ^~ /_next/static {
        add_header Cache-Control "public, max-age=3600, immutable";

        # fix for %5Bslug%5D being decoded to [slug]
        # see: https://stackoverflow.com/questions/28684300/nginx-pass-proxy-subdirectory-without-url-decoding/37584637#37584637
        # and: https://serverfault.com/questions/459369/disabling-url-decoding-in-nginx-proxy
        rewrite ^ $request_uri;
        rewrite ^/(.*) $1 break;
        return 400; #if the second rewrite won't match

        resolver 127.0.0.11 ipv6=off valid=10s;
        proxy_pass http://www:3000/$uri;
    }

Note that I can't use just location /_next/static { rule because I have regexp rule below which is heavier. So I should use regexp location.

[ubaidismail]

I'm encountering a similar issue with Next.js 14.2.15. Dynamic app routes function correctly on localhost but result in a 404 error when deployed on Vercel. The project includes markdown blogs with dynamic slugs, but they fail to load on Vercel, returning a 404 error. I have checked vercel source all requried files are included via git.

I also attempted downgrading, but it did not resolve the issue.