search

cloudflare / next-on-pages

CLI to build and develop Next.js apps for Cloudflare Pages
https://www.npmjs.com/package/@cloudflare/next-on-pages
MIT License
1.27k stars 124 forks source link

[🐛 Bug]: Setting NEXT_PUBLIC_ during preview build #758

Open seivad opened 6 months ago

seivad commented 6 months ago

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?

dario-piotrowicz commented 5 months ago

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

KamaniBhavin commented 4 months ago

@dario-piotrowicz I have an app with a .env file containing mostly public variables (no secrets), as shown below:

.env
NEXT_PUBLIC_XXX_SERVICE_URL=https://xxx.xxxx.workers.dev
NEXT_PUBLIC_YYY_SERVICE_URL=https://yyyy.xxx.workers.dev

As far as I know, prepending NEXT_PUBLIC_... makes these variables accessible via process.env.VARIABLE. This works correctly for me. However, when I deployed the app to Cloudflare Workers, it functioned as expected initially. But when I change any of these variables in the .env file and redeploy, the app continues to use the old variable values instead of the updated ones.

Do you have any idea how to resolve this issue or what I might be doing wrong?

Note: I do see the updated values in the .vercel/output/functions.