Join our next Developer Virtual Meetup – Live Q&A, Project Showcase, Swag raffle, and more 🔥

Understanding how environment variables work in a Sanity-Next project

18 replies
Last updated: Jul 14, 2022
Just created a Sanity-Next project, but cant find out where the ProjectID is not set. The “.env.local” file is in the root folder of Sanity project.
Jul 10, 2022, 5:45 PM
You may already know this, but at the time I experienced something similar, I didn't.
When you add things to env files, even local ones, you have to restart the server for it to know they exist.

If you haven't already, give that a go and see if it helps.
Jul 10, 2022, 7:05 PM
Really? I didnt know that so thank you!! ill try that for sure
Jul 10, 2022, 7:10 PM
It was pretty frustrating because I look for answers and facts like that proactively and somehow missed it. So I was hooking up to a database and it was autocompleting the process.env. and then my key but only for one variable.
I thought I was losing it haha

It just so happened that I had closed out of my IDE so the one that was already there was recognized, but not the one I just added.
Jul 10, 2022, 8:07 PM
That’s because your environment is bootstrapped on server start, not at run time.
I think a way to understand why it behaves like this is to see your server as a Node process on an entry file, like
node index.js
. It’s started once and then it just runs as a Node server.
Environment variables (from your
.env.local
file) are fed to that process on start like so:
FOO=bar BAZ=qux node index.js
. So updating that
.env.local
does not actually restart the process. 🙂
Jul 11, 2022, 7:35 AM
Yeah once I realized what was going on I totally got it. So much is made conveniently magic out there that I didn't realize it. Reminds me a bit of php.ini files. At shared hosting a lot of times you don't see it. You place it or change it and get told to check back in ten minutes. At Digital Ocean I'm the button pusher or shell person, but in either case the original ongoing process can't continue on absorbing the new info. I need to restart.
Jul 11, 2022, 4:29 PM
Could there be any other reason why it wont its telling me its not set? Tried to restart, but that didnt help. https://www.sanity.io/guides/sanity-nextjs-tailwindcss#06805025f551 Followed this tutorial.
Jul 11, 2022, 6:17 PM
Where is the error coming from? Your Sanity client? In which case, how do you instantiate it?
Jul 12, 2022, 7:07 AM
This may also be too simple an answer, but are you sure you have saved your .env file? Have you checked your sanity.json file? it also has an api with your Sanity projectId.
Jul 13, 2022, 4:39 PM
The error is coming from Sanity. I have saved the .env file and checked my sanity.json file, it has the same projectID as in the studio
Jul 13, 2022, 5:19 PM
is the way im writing this line wrong? The file name is
.env.local



NEXT_PUBLIC_SANITY_PROJECT_ID=tgymg0pq
Jul 13, 2022, 5:53 PM
and should the .env.local file be in root folder or Sanity folder?
Jul 13, 2022, 6:13 PM
In the root folder. It’s Next.js’ env file.
Jul 14, 2022, 7:26 AM
How do you instantiate your Sanity client please?
Jul 14, 2022, 7:27 AM
./lib/sanity.js
import {
  createClient,
  createPortableTextComponent,
  createImageUrlBuilder,
  createPreviewSubscriptionHook,
} from "next-sanity";
import ReactTooltip from "react-tooltip";

import { config } from "./config";

if (!config.projectId) {
  throw Error("The Project ID is not set. Check your environment variables.");
}
export const urlFor = (source) => createImageUrlBuilder(config).image(source);

export const imageBuilder = (source) =>
  createImageUrlBuilder(config).image(source);

export const usePreviewSubscription = createPreviewSubscriptionHook(config);

// Set up Portable Text serialization
export const PortableText = createPortableTextComponent({
  ...config,
  // Serializers passed to @sanity/block-content-to-react
  // (<https://github.com/sanity-io/block-content-to-react>)
  serializers: {
    types: {
      code: (props) => (
        <pre data-language={props.node.language}>
          <code>{props.node.code}</code>
        </pre>
      ),
    },
  },
});

export const client = createClient(config);

export const previewClient = createClient({
  ...config,
  useCdn: false,
});

export const getClient = (usePreview) => (usePreview ? previewClient : client);
export default client;
Jul 14, 2022, 12:30 PM
./lib/config.js

export const config = {
  /**
   * Find your project ID and dataset in `sanity.json` in your studio project.
   * These are considered "public", but you can use environment variables
   * if you want differ between local dev and production.
   *
   * <https://nextjs.org/docs/basic-features/environment-variables>
   **/
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  apiVersion: "2021-08-11", // or today's date for latest
  /**
   * Set useCdn to `false` if your application require the freshest possible
   * data always (potentially slightly slower and a bit more expensive).
   * Authenticated request (like preview) will always bypass the CDN
   **/
  useCdn: process.env.NODE_ENV === "production",
};
Jul 14, 2022, 12:31 PM
Jul 14, 2022, 12:31 PM
Alright, so your own code throws that error. That’s good to know because I couldn’t figure out where that error was actually coming from.
Jul 14, 2022, 12:41 PM
Does this error happen only in production or locally as well?
Jul 14, 2022, 12:42 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?