I have a lot of experience working with JAMStack on Netlify as we use Gatsby in my company, so in general, I know the basic setup.
Unfortunately, I have a problem with my side project created with Next.js and to be exact - with environmental variables.
I have both types of envs: secrets and those exposed to the client (with NEXT_PUBLIC_* prefix).
Everything works perfectly well in the local environment:
netlify dev and
netlify build commands return the working website with correct data.
Problems start when I publish the website on Netlify, even though I added all envs to Build & Deploy → Environment → Environment variables UI.
It seems like it doesn’t see/use these envs and the website doesn’t have any data and does not use any feature flag (which is a simple boolean with conditional rendering).
P.S. The command
netlify env:list returns correct values.
Just deployed a boilerplate Next.js project to test this, replacing the default footer with an environment variable. Strange thing is the text in the variable is written out and visible but only for about a second (I took a screen recording to check.)
I’m (kinda) glad that the issue is replicable
I would like to confirm that everything works fine on Vercel, but I would rather stick with Netlify.
Any ideas? @perry ?
Let’s pick this apart a bit and get you some next steps so we can help you get it solved!
First off, environment variables set in the UI will only be relevant during builds. So, if you set a variable in the UI, do a local build using something like
next build, and deploy the artifacts using
netlify deploy without building in our CI environment nor via
netlify build (which once your codebase is linked to your site, should pick up variables set in our UI and apply them during build), then they will have no effect. Put another way, if you add a variable after you’ve deployed, it will have no effect, since the variables are only used at build time (while your code is running, and hopefully, the values are being written out to files so we can serve the values, rather than the references). This article has more details on appropriate environment variable usage at Netlify: [Support Guide] Using environment variables on Netlify correctly .
I realize you may know all this, but am being especially verbose for people who don’t who might find this in the future
Due to this feature of our builds, the best debugging method for “are we seeing the variables at all?” will be during build - e.g. if you run “env” in our CI, or if you have that as part of your build command in netlify.toml for
netlify build (e.g.
command = "env && next build"), you should see the right variables and their values - does that happen? If so, we can move on to whether the correct content was built and is being served, but let’s confirm that first.
Once you’ve confirmed that, perhaps you can link us to a page that has an environment variable used on it, and explain how it is interpolated during build, and we can confirm or deny that the value is in the file? Then how it is displayed is more up to you and your codebase, but we’re able to debug that for you without becoming intimately familiar with your codebase, which is not something our staff will be able to do.
Not 100% sure what I have seen is the same as @Graffiss, but I’ll share it nonetheless (if for no other reason than posterity)
I have a Next.js boilerplate deployed to goofy-hodgkin-051af1 from coelmay/next-env-vars with one very secret environment variable prefixed with
As described above, it appears on page load, then disappears again.
It is there twice as I have the following in the
next.config.js as well as a direct
I created a new branch, adding the missing
target: "serverless", and amending
NEXT_PUBLIC_ to the variable output. The using
process.env. NEXT_PUBLIC_PRIVATE_VAR the variable remains, however using
envVars.NEXT_PUBLIC_PRIVATE_VAR the variable still disappears after a brief moment (no gif this time.)
Branch: coelmay/next-env-vars / test1
I just wanted to let you know that everything works fine now
I needed to add:
target: "serverless" to
next.config.js file, even though I didn’t deploy this website elsewhere so the automatic plugin should have been enough but it seems that it was not.