👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Issue deploying Sanity Studio with Next.js app on Vercel

30 replies
Last updated: Dec 1, 2021
Hi,
I have already sent this message but it was in the wrong channel.

I am trying to deploy 
Sanity.io  studio with my Next.js app. What I want to do is to be able to access Sanity studio through an address www.my-domain.com/admin . What is important, i want to deploy it to Vercel. So basically, it should work after build. I do not have issues with a dev mode (I use concurrently and have my next server at port 3000 and Sanity server at port 3333).
I learned a bit from this GitHub repo 
https://github.com/sanity-io/sanity-nextjs-vercel-example  but it is a bit outdated. NPM have introduced workspaces (so I do not use lerna) and deployment of Next.js apps does not require vercel.json. What is in vercel.json is included in my next.config.js with rewrite function (I am mapping contents of built static Sanity studio site to the admin page).
My problem is that whatever I do, when my Sanity studio static site is generated (including not using next.js) by “sanity build” command what appears is only loading Sanity logo with the title “Connecting to 
Sanity.io ”.
Has anyone had the same problem with the built Sanity static pages? Do you know what should I do to make it work?
Nov 30, 2021, 9:12 AM
Have you added your domain to your allowed CORS origins in sanity.io/manage ?
Nov 30, 2021, 6:41 PM
Hi Racheal,
Yes I did. I tried a built version on localhost:3000 and on vercel and it is always the same after adding CORS domains (I also tried just adding an asterisk as well). Nothing worked.

I forgot to add - in console I receive “Failed to load resource: the server responded with a status of 404 ()“.
Nov 30, 2021, 8:50 PM
What does your client configuration look like?
Nov 30, 2021, 9:08 PM
I do not have any client configuration yet (if by client config you mean this https://www.sanity.io/help/js-client-cdn-configuration ).
I wanted to launch the project with Sanity Studio as one of the subpages of Next.js app. And this is where I am struggling now - to make Sanity Studio work as one of the subpages. I cannot make Sanity Studio work in production mode, after build.

The console.errors I mentioned in the previous message are displayed in the studio subpage (screen attached). This is what happens when I run the command npm run build (or sanity build) and open index.html of a created static page. It happens both locally and on Vercel.

So in other words - sanity starts command works perfectly for me; sanity build command works as well but I cannot make it run properly (I only see what is in the screenshot below).

The repo from my initial message suggests that it is possible to deploy Sanity Studio as part of Next.js app.

(P.S. If I manage to accomplish deployment next.js/sanity app, I will be happy to share it with the community. The sanity repo from my first message is a bit outdated taking into account updates of Next.js and NPM)
Nov 30, 2021, 10:23 PM
I do not have any client configuration yet (if by client config you mean this https://www.sanity.io/help/js-client-cdn-configuration ).
I wanted to launch the project with Sanity Studio as one of the subpages of Next.js app. And this is where I am struggling now - to make Sanity Studio work as one of the subpages. I cannot make Sanity Studio work in production mode, after build.

The console.errors I mentioned in the previous message are displayed in the studio subpage (screen attached). This is what happens when I run the command npm run build (or sanity build) and open index.html of a created static page. It happens both locally and on Vercel.

So in other words - sanity starts command works perfectly for me; sanity build command works as well but I cannot make it run properly (I only see what is in the screenshot below).

The repo from my initial message suggests that it is possible to deploy Sanity Studio as part of Next.js app.

(P.S. If I manage to accomplish deployment next.js/sanity app, I will be happy to share it with the community. The sanity repo from my first message is a bit outdated taking into account updates of Next.js and NPM)
Nov 30, 2021, 10:23 PM
Got it! I understand now. What is the domain you're trying to add it to and does it exactly match what you've added to CORS (meaning it includes
https://
and
www
)? And to clarify something you previously mentioned, it does work on localhost?
Nov 30, 2021, 10:26 PM
Got it! I understand now. What is the domain you're trying to add it to and does it exactly match what you've added to CORS? And to clarify something you previously mentioned, it does work on localhost?
Nov 30, 2021, 10:26 PM
I do not have any client configuration yet (if by client config you mean this https://www.sanity.io/help/js-client-cdn-configuration ).
I wanted to launch the project with Sanity Studio as one of the subpages of Next.js app. And this is where I am struggling now - to make Sanity Studio work as one of the subpages. I cannot make Sanity Studio work in production mode, after build.

The console.errors I mentioned in the previous message are displayed in the studio subpage (screen attached). This is what happens when I run the command npm run build (or sanity build) and open index.html of a created static page. It happens both locally and on Vercel.

So in other words - sanity starts command works perfectly for me; sanity build command works as well but I cannot make it run properly (I only see what is in the screenshot below).

The repo from my initial message suggests that it is possible to deploy Sanity Studio as part of Next.js app.

(P.S. If I manage to accomplish deployment next.js/sanity app, I will be happy to share it with the community. The sanity repo from my first message is a bit outdated taking into account updates of Next.js and NPM)
Nov 30, 2021, 10:23 PM
Oh and one other thing: when you added the domain, did you allow credentials?
Nov 30, 2021, 10:30 PM
Oh and one other thing: when you added the domain, did you allow credentials?
Nov 30, 2021, 10:30 PM
Got it! I understand now. What is the domain you're trying to add it to and does it exactly match what you've added to CORS (meaning it includes
https://
and
www
)? And to clarify something you previously mentioned, it does work on localhost?
Nov 30, 2021, 10:26 PM
What works:• sanity start on localhost:3333
What does not work
• sanity build on localhost:3000, *.
vercel.app , by just opening index.html fileI tested CORS domains:

http://localhost:3000 • my
vercel.app domain (with https)• * (asterix - which I think allows all the domains?_
Every time I allowed credentials.

Are you sure the problem will be CORS? Wouldn’t CORS error be displayed in console.error instead of 404 error? I am using Sanity the first time, so i am a bit confused about it.
Nov 30, 2021, 10:34 PM
What works:• sanity start on localhost:3333
What does not work
• sanity build on localhost:3000, *.
vercel.app , by just opening index.html fileI tested CORS domains:

http://localhost:3000 • my
vercel.app domain (with https)• * (asterix - which I think allows all the domains?_
Every time I allowed credentials.

Are you sure the problem will be CORS? Wouldn’t CORS error be displayed in console.error instead of 404 error? I am using Sanity the first time, so i am a bit confused about it.
Nov 30, 2021, 10:34 PM
Oh and one other thing: when you added the domain, did you allow credentials?
Nov 30, 2021, 10:30 PM
It looks to me like the Sanity is rejecting your attempts to access the Studio because you don't have proper permissions and is throwing a 404.
Nov 30, 2021, 10:38 PM
It looks to me like the Sanity is rejecting your attempts to access the Studio because you don't have proper permissions and is throwing a 404.
Nov 30, 2021, 10:38 PM
Oh ok.
So what I have done so far was:
1. Creating an account on Sanity
2. Sanity init
3. Sanity start
4. Sanity build
5. Added CORS domains
I repeated 3, 4 and 5 many times in different orders.

Have I missed any steps? Should the index.html created in dist just run without doing anything else?
Nov 30, 2021, 10:42 PM
(I always delete/replace the old sanity dist folder)
Nov 30, 2021, 10:43 PM
Let me run through the steps in that repo and see if I can replicate what you're getting.
Nov 30, 2021, 10:43 PM
It looks to me like the Sanity is rejecting your attempts to access the Studio because you don't have proper permissions and is throwing a 404.
Nov 30, 2021, 10:38 PM
There is also another thing - when I launch static files with sanity studio - I have not logged in there to anything. The page from the screenshot I have sent to you appears in the very beginning, not letting me to log in.
Nov 30, 2021, 10:45 PM
While if I run sanity start, it asks me to log in first
Nov 30, 2021, 10:45 PM
Hi
user M
any updates?
Dec 1, 2021, 8:47 PM
Hi
user M
any updates?
Dec 1, 2021, 8:47 PM
Hi
user M
I found what the problem was.
The problem was the wrong path for serving other files than .html (css file and js files). After the files get generated

In the first GitHub repo in sanity.json there is an basePath element which has the value ‘/studio’. I accidentally omitted this part.
Dec 1, 2021, 9:35 PM
Thanks for the update
user N
!
Dec 1, 2021, 9:41 PM
Thank you
user M
After solving this issue I have another problem 😅 But I will post it as another message.
When I manage to go through it, I will be very happy to share my code with the community on
Sanity.io Github. This repo https://github.com/sanity-io/sanity-nextjs-vercel-example seriously requires some changes.
How can I try to contribute my code? Directly on GitHub or do I need to speak with someone before? (Sorry never contributed to any open source project)
Dec 1, 2021, 9:57 PM
Thank you
user M
After solving this issue I have another problem 😅 But I will post it as another message.
When I manage to go through it, I will be very happy to share my code with the community on
Sanity.io Github. This repo https://github.com/sanity-io/sanity-nextjs-vercel-example seriously requires some changes.
How can I try to contribute my code? Directly on GitHub or do I need to speak with someone before? (Sorry never contributed to any open source project)
Dec 1, 2021, 9:57 PM
No need to speak with anyone beforehand, you can go ahead and submit a pull request directly to the repo. There's a pretty straightforward walkthrough on this process if you're new to it here .
It is definitely out of date and I'm not sure how actively maintained it is. We'll probably stop directing people to it until we can update it. Do you remember where you found the link to it?
Dec 1, 2021, 10:04 PM
No need to speak with anyone beforehand, you can go ahead and submit a pull request directly to the repo. There's a pretty straightforward walkthrough on this process if you're new to it here .
It is definitely out of date and I'm not sure how actively maintained it is. We'll probably stop directing people to it until we can update it. Do you remember where you found the link to it?
Dec 1, 2021, 10:04 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?