Turbo Start Sanity is our best stab at building a universal, opinionated starting point for an enterprise-grade Sanity, Next.js and Vercel website (a bit of a mouthful).
We wanted to open-source the same platform we use, which can scale to tens of thousands of pages without issue.
Alternatively, you could say that we want to elevate the editorial experiences of your average marketer so that they stop using WordPress.
Getting started
To get started with Turbo Start Sanity, we recommend either running the npm command below or go directly to the Sanity Exchange page and hit the one-click install
npm create sanity@latest -- --template robotostudio/turbo-start-sanity
This will cover the entire setup process, including scaffolding out the project, populating content with Faker.js, and setting up your Sanity Studio with environment variables. You can explore the repo here.
Why pnpm and monorepo?
In short, because we cheaped out on the hard drive space on our Macbooks. That's where pnpm comes in, pnpm allows you to cache packages throughout all your different projects.
We work on a lot of different projects, and the last thing we need is to install 100 copies of the same Next.js package for each individual client. As a bonus, it also significantly speeds up installs by reusing these packages. Dropping that 2 minutes npm i to a 10 second pnpm i.
Not bad for an extra p at the start of the command.As for the monorepo, we've always been huge fans of siloing our headless CMS to ensure a separation of concerns. That's how we handle Turbo Start, and that's how we'd advise you to work with Sanity Studio.
Using Sanity Live Content API
Hands down, the most significant upgrade to working with headless CMSs has been Sanity Live Content API. It doesn't get that much publicity because it's pretty difficult to explain what it actually does. Even more so, explain why it's valuable unless you've accidentally pushed something to your live website that you want off immediately.
Building page-builder blocks with AI
The first thing you'll probably want to do is either build an additional schema or add another block to the page builder. Lucky for you, we've built a prompt for exactly this here.
If you're new to schema, here's how we recommend building it: Before doing this, make sure you've added the prompt above within Cursor.
Using v0.dev
Naturally, because the whole project is built with vanilla Next.js, Tailwindcss, and Sanity, v0 is a perfect fit for generating components on the fly. We personally recommend building them from Figma designs and providing a prompt that doesn't really split out too much tsx to avoid issues with overriding content.
Here's the prompt we used in the video
Objective: Develop a component in isolation, to make it easy for a developer to implement within a large headless CMS project. The component should encompass all utilities, styles with Tailwind and functionality within a singular tsx file. There should be json at the top of the file that populate the text and images throughout the page so it can be easily rewired into a headless CMS at a later date.File Naming Conventions:• Use kebab-case for all file names.• Correct: user-profile.tsx, auth-layout.tsx, api-utils.ts• Incorrect: userProfile.tsx, AuthLayout.tsx, apiUtils.ts• Use .tsx extension for React components.• Use .ts extension for utility files.• Use lowercase for all file names.• Separate words with hyphens.• Do not use spaces or underscores.
Understanding fallbacks
When it comes to building a website with a live preview, you're going to hit a ton of edge cases. That's why we always recommend following the advice from Sanity Learn about title, seoTitle, and ogTitle and why we use each of those as a respective fallback.
In short, you want your editors to do the least work possible to get the minimum working page (maybe we should call it MWP).It also means you only have to fill out SEO for the pages that actually rank.
Did you break something?
If you're working with Turbo Start Sanity and notice a significant error, get in touch. Better yet, open a PR. This is an open-source repo, after all. We are always working to upgrade and improve elements with the tool, and any help would be much appreciated.
Talking of which, shout out to the incredible efforts of James Singleton, who already broke Turbo Start twice and added two PRs to fix it. MVP 🏆
Go build something
Honestly, before I get too preachy, there's never been a better time to start actually building. We'd love to see what you're creating, so feel free to reach out if you want to show off; we love to see it.
