Skip to content
Get help on SlackWatch Sanity demo

Troubleshooting issues with setting up environment variables for a Next.js project

26 replies
Last updated: Apr 7, 2022
Not sure why it is saying this? I have .env file with the right information.
Apr 5, 2022, 8:12 PM
You didn’t specify a Sanity project ID inside the env file.
Apr 5, 2022, 8:17 PM
hmm im still having the same error. This here is my .env.local
Apr 5, 2022, 10:40 PM
Hmm this is from a nextjs project I am tinkering with now. Maybe try deleting and reinstalling your node modules, possibly also your npm/yarn lock file too. Try running it directly in the terminal dir outside of vscode as well. My best guess is that it’s something funky with react/next’s build.

SANITY_API_TOKEN=beepbooplongtokenstring1234
SANITY_DATASET=production
SANITY_PROJECT_ID=abcd1234
Apr 5, 2022, 10:58 PM
possibly also if this is in dev try entering your variables directly into the client config to test and then move one thing at a time into your .env config.
Apr 5, 2022, 10:59 PM
Also, I’m using node16.x in dev and have this deployed I think using node14 both on vercel and codesandbox
Apr 5, 2022, 11:00 PM
It seems that just typing in the api token works fine. Now im getting an error of undefined when fetching.
Apr 6, 2022, 4:11 PM
The problems i have having might have to do with me installing sanity init within my project?
Apr 6, 2022, 4:14 PM
The problems i have having might have to do with me installing sanity init within my project?
Apr 6, 2022, 4:14 PM
Currently, you’ll need to treat the studio as a different node project, even if it’s nested in a monorepo. so additional tooling or scripts are going to be needed to import env values between your studio root and the main project / fe root. My examples are just a typical nextjs project without a nested studio monorepo.
Apr 6, 2022, 4:20 PM
okay thanks
Apr 6, 2022, 4:42 PM
I have separated the two projects and still seem to have the same problem with .env. Im a completely unsure why it cannot read the projectId i have set within the env file.
Apr 6, 2022, 5:05 PM
This is nexjs right? Make sure your sanityclient config is outside of the pages directory in /lib or /components. Maybe try setting up a test to make sure it’s getting your env config at all. I believe nextjs lets you render vars to the dom if they’re prefixed correctly. Try something like:

// in .env.local
NEXT_PUBLIC_TEST_VAR=testVariable12345
// in pages/index.js
...
export default function Home(){
  const testVar = process.env.NEXT_PUBLIC_TEST_VAR
  return (
    <div>
      <h1>Let's do us a web site!</h1>
      {testVar}
    </div>
  )
}

Apr 6, 2022, 5:41 PM
import sanityClient from "@sanity/client";

const config = {
  projectId: process.env.SANITY_PROJECT_ID || "",
  dataset: process.env.SANITY_DATASET || "production",
  token: process.env.SANITY_API_TOKEN,
  apiVersion: "2021-04-02",
  useCdn: false,
};

export default sanityClient(config);
Apr 6, 2022, 8:27 PM
if you’d like to refer to something like this template just bear in mind that the projectid and api values are copied into the nested studio in the monorepo with the node package script. But if you check out env.test and the sanity config you can get an idea of some good methods. I might also suggest creating this as an example project or one of the similar supported starters and following the config steps in README. This could then be a good working example for you.
Apr 6, 2022, 8:51 PM
Thanks Ricky. It appears your env variable names don't match between your .env file and sanity.js.
Apr 6, 2022, 8:53 PM
user U
Will take a look.
user A
I have corrected it and still have the same problem. I forgot to change it when I tried Julia’s code.
Apr 6, 2022, 9:37 PM
Corrected to use the 
NEXT_PUBLIC_
prefix?
Apr 6, 2022, 9:39 PM
Yes sir.
Apr 6, 2022, 9:45 PM
where are these env values and the client config in your file structure?what does your package config look like?
Apr 6, 2022, 9:52 PM
Im not sure if this fully answers your question but a pic of my file structure and package config?
Apr 7, 2022, 12:54 AM
try renaming that .env.local in your dev environment and move your sanity client config to either /lib or /utils
Apr 7, 2022, 1:06 AM
after doing that, delete your node_modules and .next directories and recompile
Apr 7, 2022, 1:07 AM
Sorry but how do i recompile?
Apr 7, 2022, 1:10 AM
Figured it out and now its working and pulling data from .env
Apr 7, 2022, 1:15 AM
thanks
Apr 7, 2022, 1:15 AM
npm install
or just 
yarn
depending on your pkg mgr. Grats! 🥳
Apr 7, 2022, 2:03 AM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in