[Bug]: nextjs does not work with proxy

[sawa-ko]

Is there an existing issue for this?

• I have searched the existing issues

OS/Web Information

• Web Browser: Edge 107.0.1418.62
• Local OS: Windows 11 Pro
• Remote OS: Debian GNU/Linux 11 (bullseye)
• Remote Architecture: aarch64
• code-server --version:
  1.72.1
  129500ee4c8ab7263461ffe327268ba56b9f210d
  arm64

Steps to Reproduce

1. Create a nextjs project
2. Start the server
3. Go to the proxy url
4. See how nextjs tries to get the files from "domain.com/x" instead of "domain.com/proxy/3000".

Expected

To be able to use the nextjs server without the error that the assets are not found.

Actual

Errors about files in the _next/static folder not being found.

Logs

No response

Screenshot/Video

Does this issue happen in VS Code or GitHub Codespaces?

• I cannot reproduce this in VS Code.
• I cannot reproduce this in GitHub Codespaces.

Are you accessing code-server over HTTPS?

• I am using HTTPS.

Notes

No response

[jsjoeio]

You need to use the /absxproxy instead.

In your next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: "/absproxy/3000",
};

module.exports = nextConfig;

Then access it at http://localhost:8080/absproxy/3000

References:

• https://nextjs.org/docs/api-reference/next.config.js/basepath
• https://coder.com/docs/code-server/latest/guide#proxying-to-create-a-react-app

[sawa-ko]

Hi that only works for js files (bundle files) but when you try to use files from public folder it doesn't work.

<Image src"/image.png"/>

Trying to use files like this gets a 404 error because the browser tries to get them from the root domain.

[jsjoeio]

Hmm that seems specific to Next.js then. Have you tried asking for help in their Discussions?

[jsjoeio]

Possibly related: https://github.com/vercel/next.js/discussions?discussions_q=next%2Fimage+behind+proxy

[jsjoeio]

Based on what I'm seeing, this seems to be a problem in Next.js: vercel/next.js#33872

[jsjoeio]

I hope that helps!

[JadenSWang]

If you set basepath to '' and assetPrefix to '/proxy/portnumber/', you'll be able to access your homepage but routing does not work properly...

I suspect NextJS is serving the assets to /proxy/portnumber/proxy/portnumber but looking for them in /proxy/portnumber/