Watch a live product demo 👀 See how Sanity powers richer commerce experiences

Hosting Sanity + Next.js Project on Vercel - Monorepo or One Project?

2 replies
Last updated: Feb 23, 2021
I am new to the field. May I ask how should I host sanity and the nextjs web through vercel? Should I do it in monorepo or should I host it in one project? I have tried to host it in one project, however I am completely puzzled on how to do that as it seems there isn't a guide for it and when I read through many github projects that host both the web and sanity in the same project, the configuration method seems to differ from project to project. Thanks for any help!
Feb 23, 2021, 3:47 AM
Hi and welcome, Harry. I personally take the monorepo approach and I believe in most cases, Sanity does too. In fact, in this article Knut links to a list of monorepo pros and cons that you could consider.
To start off, you’ll need to have installed the CLI. If you haven’t already, run
npm i -g @sanity/cli
.
Here’s how I get set up. I create my project folder, then in it I add two folders:
sanity
and
web
. Call them what you wish. I go to the sanity folder and run
sanity init
, which creates a project. I usually choose the clean schema and then add in my own boilerplate, but you can choose whichever you think will best get you started. At this point, your Sanity project should be ready to go. You could run
sanity start
and start working in the Studio, but I would normally get the rest set up first.
In
web
you can set up however you choose. You’re planning to work with Next.js, so you can follow the steps (
create-next-app
or however you get started).
Once you’re set up, go to your project folder (containing
sanity
and
web
) and initialize your git repo. Make sure you have
.gitignore
files set up so you’re not committing node_modules and other ignorables. I’ll assume you’re deploying to GitHub but GitLab, BitBucket, or even a third-party repo should work, too.
I deploy all my studios to Sanity, which simply requires a
sanity deploy
command. Everything is committed to my GitHub repo but is accessible from
https://<name>.sanity.studio
.
For your front end, go to
vercel.com and choose New Project. Import the repo you created and committed to, and then when you get to the Import Project screen, select
web
(or whatever you called it). Vercel should automatically detect your framework and set your build settings.
If you run into any struggles, please post back here.
Feb 23, 2021, 5:32 AM
Thank you very much for your reply!
Feb 23, 2021, 5:53 AM

Sanity.io – build remarkable experiences at scale

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

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing