Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

New user seeks help with configuring Sanity client in Next.js app.

9 replies
Last updated: Oct 19, 2023
Jun 10, 2023, 2:00 PM
This looks like it’s coming from where you’ve configured your client on your front end, rather than from within the Studio code. Can you please post the code snippet where you’ve instantiated your client? Something like:

import { createClient } from '@sanity/client';

export const client = createClient({
  projectId: 'abcd1234',
  dataset: 'production',
  apiVersion: '2023-06-10',
  useCdn: true,
});
Jun 10, 2023, 2:44 PM
Hi User, thank you for offering your help. I'm currently new to Sanity and I'm working on building an E-Commerce app with Sanity and Next.js. I followed the steps to install the Next.js npm package first and then created the project from the web of sanity. Then, I installed the npm package for Sanity that was provided after creating the project.
Since I'm new to Sanity, I'm a bit confused about the code snippet you mentioned. I'm not sure where exactly I need to instantiate the client as you described. Could you please provide more guidance or clarification on how to integrate Sanity into my application and create the client?

Thank you for your assistance, I really appreciate it!
Jun 10, 2023, 2:59 PM
Welcome to the community!
In your Next.js code, you will use the Sanity Client to pull in your content from the Content Lake (essentially the Sanity data store). That client will need to be configured with your projectId, dataset, etc., so that it knows where to source from.

Is there a particular guide or tutorial you’re following? I can take a look and find where the client is configured.
Jun 10, 2023, 3:06 PM
https://youtu.be/4mOkFXyxfsU is a 1 year old video which I am using to learn about Sanity. But the difference is that I am using all the latest versions, not the old ones.
Thank you User for helping, I will check out Content Lake.
Jun 10, 2023, 3:32 PM
Looks like they start that setup at around the 40:36 mark . You’ll now import 
{ createClient } from '@sanity/client';
and will use that function in place of 
sanityClient
, but the config looks to be the same. Make sure you’re specifying `projectId`—case matters.
Jun 10, 2023, 3:40 PM
You are awesome User, while following the video I will do as you say and import createClient. 🤩 👍
Jun 10, 2023, 4:03 PM
Hey guys! I know I'm late but I'm having similar issue.
Same error but with a NextJS app. My import createClient is a bit different, it does not come from "@sanity/client" but instead "next-sanity"

Here is my ./root/sanity/lib/client.js file (which was generated by 
npm create @sanity/latest
cmd):

import { createClient } from 'next-sanity';
import { apiVersion, dataset, projectId, useCdn } from '../env';

export const client = createClient({
  apiVersion,
  dataset,
  projectId,
  useCdn,
});
Oct 19, 2023, 5:50 PM
Let’s use greetings like “Hey Everyone,” “Hi, Y’all," or “Hello, Folks” to make sure everyone in the community is included. Please read the Sanity Community Code of Conduct to stay updated on expected communication & behavior in our spaces: https://www.sanity.io/docs/community-code-of-conduct
Oct 19, 2023, 5:50 PM
The 
../env
file in question is:
export const apiVersion =
  process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-10-14';

export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET;

export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID;

export const useCdn = false;
And 
process.env
is getting those variables from 
.env.local
file generated by NextJS as well.
Oct 19, 2023, 5:52 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.

Get started for freeExplore the demo

Was this answer helpful?