[🐛 Bug]: Setting NEXT_PUBLIC_ during preview build

[seivad]

next-on-pages environment related information

Latest

Description

Is there a way to set NEXT_PUBLIC_BASE_URL for example with the dynamically generated url provided during pnpm run deploy?

I cannot figure it out and there are actions in my NextJS project that look for process.env.NEXT_PUBLIC_BASE_URL but because I have 1 or more items set in wranger.toml, I cannot adjust on the web interface.

I know there is CF_PAGES_URL during build but there are no instructions on how to set this in wrangler.toml as a [vars] item, any help is greatly appreciated to get past this blocker.

Reproduction

No response

Pages Deployment Method

Direct Upload (wrangler pages publish or the @cloudflare/pages-action GitHub Action)

Pages Deployment ID

No response

Additional Information

No response

Would you like to help?

• Would you like to help fixing this bug?

[dario-piotrowicz]

Hi @seivad 👋 (so sorry for the very late reply! 🙇)

The CF_PAGES_URL environment variable is injected in your application during deployment (as per the pages docs) and it is then always available in your deployed application and you can simply use it via process.env or getRequestContext.

I've created this minimal demo for you on how you could use this variable (alongside the other Pages injected ones) while also having the variables populated during local development (via .dev.vars): https://github.com/dario-piotrowicz/next-on-pages-cf-pages-envs-demo.

I hope this helps, please let me know if it does 🙂

Note

You do now want to set the CF_PAGES_URL in your wrangler.toml file as it would override the injected variable, so either make the variable optional and check for its existence or use the .dev.vars file like in my demo