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: next dev, next build, 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.)
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.
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 process.env.PRIVATE_VAR reference.
envVars: process.env,
Edit/Addition:
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
Deploy: 611ca792d1cee3000843f96d–goofy-hodgkin-051af1
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.
