First of all, if you haven't had a chance to implement Turbo Start Sanity, we highly recommend starting by either running the npm command:
npm create sanity@latest -- --template robotostudio/turbo-start-sanity
This will go through the entire setup process of running and populating Turbo Start Sanity. If you want to read more of the details about the project, you can do so here.
We're going to assume you have moderate development skills from this point onwards, so we can go deep down the rabbit hole without any brakes.
Why pnpm and monorepo?
Because we cheaped out on the hard-drive space on our Macbooks, and now we are paying the price for Apple's over-inflated storage costs. Essentially, pnpm allows you to cache packages throughout all your different projects. In other words, there's not 100 copies of the same Next.js 15.2 package throughout all our client projects. As a bonus, it also significantly speeds 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
Using Sanity Live Content API
Hands down, the most significant upgrade to working with headless CMS', has been Sanity Live Content API. The reason it doesn't get that much publicity is because it's "pretty difficult to explain what it does". Even more so, explain why it's valuable unless you've accidentally pushed something to your live website that you want off - immediately.
Using AI with the project
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.
Here's how we'd recommend building schema if you're new to it. Make sure you've added the prompt above within Cursor before doing this.
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 live preview, you're going to hit a hell of a lot of edge cases. That's the reason why we always recommend following the advice from our SEO learn course about title, seoTitle and ogTitle and why we use each 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 really have to fill out SEO for the pages that actually rank.
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.
If you're really stuck, though, get in touch and pay us to fix it. Unfortunately, British Gas isn't accepting open-source stars as a source of payment, so we need to make money somehow.
