reactjs.htaccessnext.jsreverse-proxy

encoding issue for dynamic URL's (notes/[noteName]/edit)


I am rewriting via proxy a subfolder to localhost:3000 using Proxy in htaccess.

RewriteRule ^(.*)$ http://localhost:3000/my-folder/$1 [P,L]

And I am using a basePath and assetPrefix in Next Config (both to /my-folder)

This seems to work well, even folder subpages, like /notes/list.

However, it does not seem to work well for pages like notes/[noteName]/edit, I believe because of the [ and ] that are encoded as %5B and %5D in HTML. Though on my local setup that seems to work fine.

After running next build and next start I'm ending up with console log errors like

404 Not found /_next/static/chunks/app/notes/%5BnoteName%5D/edit/page-d3a7b102dc1b542a.js

And a white page on the server. No issues on my local setup.

Even if I create a middleware and log the request, it shows the request is properly received by the server:

Requested route: /_next/static/chunks/app/notes/%5BnoteName%5D/edit/page-d3a7b102dc1b542a.js

And the folder exists, but the folder does not use encoded characters: [noteName]/, but that is the same on my local setup.

Any ideas?


Solution

  • Found the answer 😀 Link below, solution 2

    I guess I almost had this solution, but I was using NextResponse.redirect() instead of NextResponse.rewrite(), also I like the approach of using decodeURIComponent() versus .replaceAll().

    https://stackoverflow.com/a/79212001/248756