# [Architecture & DevOps](/learn/course/architecture-and-devops) Whether you're first getting your project off the ground or developing new features in an existing one, having a well-defined end-to-end development workflow is crucial for shipping your work efficiently and reliably without impacting the day-to-day content operations of your editors. ## [Introduction to Development Workflow](/learn/course/architecture-and-devops/introduction-to-development-workflow) Sanity’s code-first approach makes it uniquely suited for automation and naturally aligns with CI/CD to supports safe, continuous iteration without disrupting content teams. ## [Setting Up Your Environments](/learn/course/architecture-and-devops/setting-up-your-environments) Separate development and production environments ensure isolated testing, stable workflows, and safe content migrations without disrupting editors. ## [Deploying Environment-Specific Studios](/learn/course/architecture-and-devops/deploying-environment-specific-studios) Deploying separate Studios ensures clean environment separation, safer iteration, and uninterrupted content editing. ## [Automating Development Workflow](/learn/course/architecture-and-devops/automating-development-workflow) Automate Sanity Studio deployments and CI checks that validate schemas and content, ensuring every code change is rigorously reviewed and production-ready. # [AI-powered Sanity development](/learn/course/code-with-ai) With its all-code configuration, AI tools make Sanity a perfect choice as a content backend, and developers of varying levels of experience—including those with none at all—greatly benefit from AI tooling. Do it the right way for the best results, take on more ambitious projects, lower the barrier to entry and create happier content authors. ## [The present future of Sanity development](/learn/course/code-with-ai/the-present-future-of-sanity-development) Coding is no longer just for developers, however AI won't "do it all." Level-set your expectations on what AI tooling can and can't do for the pace and quality of development. ## [Introduction to prompting](/learn/course/code-with-ai/introduction-to-prompting) Get better results from AI tools by crafting effective prompts, setting realistic expectations, and using them for interactive brainstorming sessions. ## [Writing code with AI assistance](/learn/course/code-with-ai/writing-code-with-ai-assistance) An introduction to Cursor, the AI-powered code editor you'll use in this course. Get to know the Chat window and the difference between an Ask and an Agent. ## [Voice dictated prompts](/learn/course/code-with-ai/voice-dictated-prompts) You may find it much faster and more natural to write prompts with your voice rather than your hands. Here's how I like to do it. ## [Agent rules](/learn/course/code-with-ai/ai-rules) By default AI tools will write the most average code, with a little extra guidance it can be much more expressive—to the benefit of your authors. ## [Rapidly generating placeholder content](/learn/course/code-with-ai/rapidly-generating-placeholder-content) You may think the only use for AI tools is to write code, but we can use it to write content and run commands to import it. ## [Adding Sanity content to any front end](/learn/course/code-with-ai/adding-sanity-content-to-any-front-end) You can pick whatever framework you'd like to complete this lesson. It's up to AI—and your prompting skills—to make it work. ## [AI-unassisted quiz](/learn/course/code-with-ai/ai-unassisted-quiz) AI can't help you here. Let's reflect on what you've learned. # [Content-driven web application foundations](/learn/course/content-driven-web-application-foundations) Combine Sanity and Next.js and deploy to Vercel via GitHub to get the fundamentals right. Powering a fast and collaborative development and content editing experience. ## [Building content-editable websites](/learn/course/content-driven-web-application-foundations/building-a-content-editable-website) Sanity powers content operations beyond a single website or application, while Next.js focuses on best-in-class content delivery. Combine them into a powerful modern stack to build content-driven experiences. ## [Create a new Next.js 16 application](/learn/course/content-driven-web-application-foundations/create-a-new-next-js-application) Create a new, clean Next.js application with a few opinionated choices for TypeScript and Tailwind CSS. ## [Create a new Sanity project](/learn/course/content-driven-web-application-foundations/create-a-new-sanity-project) Create a new free Sanity project from the command line and automatically install Sanity Studio configuration files into your Next.js project. ## [The next-sanity toolkit](/learn/course/content-driven-web-application-foundations/the-next-sanity-toolkit) Unpack next-sanity, the all-in-one Sanity toolkit for "live by default," production-grade content-driven Next.js applications. ## [Query content with GROQ](/learn/course/content-driven-web-application-foundations/writing-groq-queries) Organize and author queries for your content with best-practice conventions. ## [Generate TypeScript Types](/learn/course/content-driven-web-application-foundations/generate-typescript-types) Add Type-safety to your project and reduce the likelihood that you will write code that produces errors. ## [Fetch Sanity Content](/learn/course/content-driven-web-application-foundations/fetch-sanity-content) Query for your content using Sanity Client, a library compatible with the Next.js cache and React Server Components for modern, integrated data fetching. ## [Git-based workflows](/learn/course/content-driven-web-application-foundations/git-based-workflows) Version control, collaborate on, and deploy your Next.js application by storing it in a Git repository. ## [Go live on Vercel](/learn/course/content-driven-web-application-foundations/deploy-to-vercel) Publish your web application to the world. Vercel's hosting and Next.js are made for one another, so it just makes sense to put them together for this project. ## [Displaying images](/learn/course/content-driven-web-application-foundations/displaying-images) Sanity stores your image assets, learn how both the Sanity CDN and Next.js's Image component help optimize rendering them. ## [Block content and rich text](/learn/course/content-driven-web-application-foundations/block-content-and-rich-text) Put the power of Portable Text to work for rendering simple formatted text up to complex block objects. ## [Build up the blog](/learn/course/content-driven-web-application-foundations/build-up-the-blog) With all the basics in place, let's blow out our blog front end into something more visually impressive. ## [Fundamentals quiz](/learn/course/content-driven-web-application-foundations/fundamentals-quiz) A quick test of everything you've learned through this course. # [SEO optimized content with Next.js](/learn/course/seo-optimization) SEO doesn't have to be complicated. It's a matter of taking content you've already responsibly structured with Sanity and rendering it in the format and places that search engines expect. Complete this course to improve how robots and humans interact with your content with Sanity and Next.js ## [An introduction to SEO and structured content](/learn/course/seo-optimization/an-introduction-to-seo-and-structured-content) A few core principles, applied consistently, can form a solid foundation that benefits both search engines and editorial workflows. ## [SEO schema types and metadata](/learn/course/seo-optimization/seo-schema-types-and-metadata) Prepare useful, optional and reusable schema types specifically for SEO content and render them into page metadata the Next.js way. ## [Extending the SEO schema types](/learn/course/seo-optimization/adding-seo-fields-to-your-project) Now you're setup for success, extend the fields made available to your authors. ## [Implementing redirects](/learn/course/seo-optimization/implementing-redirects) Redirects are a critical component of SEO and site maintenance. While they may appear straightforward at first, improper implementation can lead to complex redirect chains and degraded site performance. ## [Creating dynamic Open Graph images](/learn/course/seo-optimization/creating-dynamic-open-graph-images-with-vercel-og) Generate dynamic Open Graph images that pull your data directly from Sanity, saving you hours of design work and ensuring your social previews are always up to date with your content. ## [Generate social posts from your content](/learn/course/seo-optimization/ai-generate-social-posts-from-your-content) Speed up ideation of social media posts. And as a result, boost your SEO from sharing your content to a wider audience across different social platforms. ## [Build a dynamic sitemap](/learn/course/seo-optimization/building-a-dynamic-sitemap) A sitemap helps search engines understand and index your website more effectively. Generate a dynamic sitemap to guide search crawlers through your content, showing them what pages exist and how often they change. ## [Generating JSON-LD dynamically](/learn/course/seo-optimization/generating-json-ld-dynamically) JSON-LD is a powerful way to provide structured data to search engines—fortunately structured data is what Sanity does best. ## [Sanity SEO quiz](/learn/course/seo-optimization/sanity-seo-quiz) Let's test what you've learned in the prior lessons! # [Build content apps with Sanity App SDK](/learn/course/build-content-apps-with-sanity-app-sdk) Building fast, real-time content authoring applications has never been simpler. Create a feedback processing application with user assignment, AI analysis and more. ## [Building content apps](/learn/course/build-content-apps-with-sanity-app-sdk/building-content-apps) A true content operating system provides more than one way to author content. Build powerful, fit-for-purpose applications faster than ever before. ## [Create a new Project and Studio](/learn/course/build-content-apps-with-sanity-app-sdk/create-a-new-project-and-studio) Get setup with a fresh hosted backend for your content, and the traditional administration panel for Sanity. ## [Quickstart a new App SDK app ](/learn/course/build-content-apps-with-sanity-app-sdk/quickstart-a-new-app-sdk-app) Start a new App SDK app in seconds from the command line using the Sanity UI template. ## [useDocuments](/learn/course/build-content-apps-with-sanity-app-sdk/use-documents) Performant querying for a live-updating list of documents has never been simpler. ## [useDocumentProjection](/learn/course/build-content-apps-with-sanity-app-sdk/use-document-projection) Pick just the content you need from individual documents, and only when a component is rendered in view. ## [useDocument](/learn/course/build-content-apps-with-sanity-app-sdk/use-document) Fetch content with real-time and optimistic updates when edits are made—locally or remotely. ## [useEditDocument](/learn/course/build-content-apps-with-sanity-app-sdk/use-edit-document) Edit values in documents with all user interface and versioning complexity extracted away. ## [useApplyDocumentActions](/learn/course/build-content-apps-with-sanity-app-sdk/use-apply-document-actions) Perform actions on documents to end—or begin—the content lifecycle ## [useDocumentEvent](/learn/course/build-content-apps-with-sanity-app-sdk/use-document-event) Listen to changes to content in your application and trigger events in the user interface. ## [useUsers](/learn/course/build-content-apps-with-sanity-app-sdk/use-users) Render an interactive list of Sanity project users to assign to documents. ## [useUser](/learn/course/build-content-apps-with-sanity-app-sdk/use-user) Filter the queried list of documents based on the current user and other selections. ## [useNavigateToStudioDocument](/learn/course/build-content-apps-with-sanity-app-sdk/use-navigate-to-studio-document) Bridge the gap between your application and Sanity Studio with an automatic link. ## [useClient](/learn/course/build-content-apps-with-sanity-app-sdk/use-client) "Break glass in case of emergency" access to the all-powerful Sanity Client. ## [Deployment and finishing touches](/learn/course/build-content-apps-with-sanity-app-sdk/deployment-and-finishing-touches) You have a working app. It's time to share it with your authoring team and tidy up some rough edges. ## [SDK Quiz](/learn/course/build-content-apps-with-sanity-app-sdk/sdk-quiz) Let's put everything you've learned to the test! # [Controlling cached content in Next.js](/learn/course/controlling-cached-content-in-next-js) Creating a high performance web application for fast loading depends on caching. Learn how to implement a caching strategy you can understand, debug and depend on. ## [Caching Fundamentals](/learn/course/controlling-cached-content-in-next-js/introduction) Next.js has prioritized performance with its caching methods and expects you to configure them. Learn how to integrate the Next.js cache and Sanity CDN for high performance. ## [Demystifying caching in development](/learn/course/controlling-cached-content-in-next-js/debugging-caching-in-development) Set up Next.js so that as you make changes and navigate through the application, you can observe the impact of your cache configuration. ## [Combining Sanity CDN with the Next.js Cache](/learn/course/controlling-cached-content-in-next-js/combining-sanity-cdn-with-the-next-js-cache) Implement Sanity Client in a way that compliments and leverages the Next.js cache with sensible defaults. ## [Time-based cache revalidation](/learn/course/controlling-cached-content-in-next-js/time-based-cache-revalidation) Time-based revalidation is simple to setup and predictable. It might be "enough" for your project. ## [Path-based revalidation](/learn/course/controlling-cached-content-in-next-js/path-based-revalidation) Surgically revalidate individual post pages by their path when updates are made to their document in Sanity Studio. ## [Tag-based revalidation](/learn/course/controlling-cached-content-in-next-js/tag-based-revalidation) Assign tags to queries to revalidate the cache of many paths by targeting any individual tag. ## [Quiz to win cache prizes](/learn/course/controlling-cached-content-in-next-js/conclusion) Let's review what you've learned about caching and balancing the content you have with the people it serves. # [Testing Sanity Studio](/learn/course/testing-sanity-studio) Learn to balance test coverage with development velocity while protecting the critical operations that power your Content Operating System. Establish automated testing strategies, document business requirements in executable code, and enable confident iteration. From validation logic to React components, develop an intentional testing strategy that ensures reliability and enables you to ship Studio changes with confidence. ## [Why Testing Matters for Studio Development](/learn/course/testing-sanity-studio/why-testing-matters-for-studio-development) Testing isn't just quality assurance—it's strategic infrastructure that protects your business logic and enables rapid iteration. Understand how tests document requirements in executable code, provide confidence before changes reach content editors, and free your team to move faster. Learn what makes Studio customizations worth testing and how to think about testing as an investment in long-term velocity. ## [Setting Up Your Testing Environment](/learn/course/testing-sanity-studio/setting-up-your-testing-environment) Configure Vitest as your testing framework and integrate it into your Studio development workflow. Set up test environments for both monorepo and single-app configurations, understand how testing fits into your build process, and write your first test. Learn the fundamentals of test structure, assertions, and organizing test files alongside the code they verify. ## [Testing Validation and Access Control](/learn/course/testing-sanity-studio/testing-validation-and-access-control) Start with the simplest testing scenario: functions with no external dependencies or side effects. Test access control logic that determines who can edit fields, validation functions that enforce business rules, and utility functions that transform data. These isolated functions are straightforward to test and often contain critical business logic that protects content quality across your organization. ## [Testing Stateful Studio Logic](/learn/course/testing-sanity-studio/testing-stateful-studio-logic) Test validation functions that query your Content Lake to verify business rules across documents. Learn to mock the Sanity client to create controlled test scenarios, build reusable test fixtures that simplify setup, and verify async validation logic that prevents invalid content states. Understand how to test functions that depend on external data without requiring a populated dataset. ## [Testing Studio React Components](/learn/course/testing-sanity-studio/testing-studio-react-component) Test custom input components that render UI, use Studio hooks, and handle user interactions. Configure a browser-like test environment with React Testing Library, create provider fixtures that supply Studio context, and verify component behavior through simulated user actions. Learn what aspects of components are worth testing and how to balance thorough coverage with maintainable tests. ## [Continuous Integration and Test Strategy](/learn/course/testing-sanity-studio/continuous-integration-and-test-strategy) Move tests from local development into CI pipelines that verify changes before they reach production. Configure automated test runs on pull requests, report test results directly in GitHub, and develop a strategic framework for deciding what to test. Learn to prioritize test coverage based on business impact, complexity, and change frequency—balancing protection with development velocity. ## [Tests as Content Operating System Infrastructure](/learn/course/testing-sanity-studio/tests-as-content-operating-system-infrastructure) Tests aren't overhead—they're strategic infrastructure that enables confident scaling of your Content Operating System. Comprehensive test coverage protects critical operations as your Studio grows, documents business requirements for future developers, and creates the safety net that allows your team to iterate rapidly. Learn to view testing as a foundational investment that compounds in value over time. # [Build landing pages with Next.js](/learn/course/page-building) Give your content authors the creative freedom they need to produce landing pages by assembling individual blocks while still benefitting from structured content. ## [An introduction to page builders](/learn/course/page-building/an-introduction-to-page-builders) Setup your page builder the right way with Sanity and Next.js, understanding the process and best practices. With editing affordances your content creators will understand and appreciate. ## [Create page builder schema types](/learn/course/page-building/create-page-builder-schema-types) Setup the initial "blocks" of content and set the foundation of your page builder schema types. ## [Improve authoring with previews and thumbnails](/learn/course/page-building/improved-ui-with-previews-and-thumbnails) Updates to the configuration of your page builder schema types can dramatically improve the content creation experience. ## [Render pages](/learn/course/page-building/rendering-pages) Create a new dynamic route to render "page" documents and create links to them within Sanity Studio for an interactive live preview within Presentation. ## [Render page builder blocks](/learn/course/page-building/rendering-page-builder-blocks) Setup the unique components for each individual "block" to render on the page. ## [Creating a "home" page](/learn/course/page-building/creating-a-home-page) Create a "singleton" document to store distinct content that is globally relevant to the application. ## [Drag and drop in Visual Editing](/learn/course/page-building/drag-and-drop-in-visual-editing) Allow authors to re-order blocks on page, without editing the document. ## [Scaling page builders and pitfalls](/learn/course/page-building/scaling-page-builders-and-pitfalls) How to keep your page builder tidy as your project grows over time. # [A/B Testing](/learn/course/a-b-testing) Understand the what, why, and how of A/B testing within Sanity Studio. Enable data-driven decision-making to lead to an improved product ## [Introduction to A/B Testing](/learn/course/a-b-testing/introduction-to-a-b-testing) Why would we want to A/B test, and how do we plan for an A/B test ## [Field Level Experimentation](/learn/course/a-b-testing/field-level-experimentation) Sanity has created a plugin that allows A/B/N testing experiments to individual fields. You can set the experiments and their variations as config or use an async function to return the information. ## [Implementing an A/B test](/learn/course/a-b-testing/implementing-an-a-b-test) How to query for data and how to setup an A/B test on a front end ## [A/B Testing quiz](/learn/course/a-b-testing/a-b-testing-quiz) You have made it this far 🎉, lets have a quiz to put your A/B testing knowledge to the ... test. # [Integrated Visual Editing with Next.js](/learn/course/visual-editing-with-next-js) The ultimate upgrade for content authors is to have absolute confidence in the impact of their work before they press publish – as well as the tools to rapidly find and update even the most minor pieces of content. ## [Understanding Visual Editing](/learn/course/visual-editing-with-next-js/understanding-visual-editing) Visual Editing is powered by a combination of Sanity features, which is helpful to understand before implementation. ## [Token handling and security](/learn/course/visual-editing-with-next-js/token-handling-and-security) To access draft content your application will need to be authenticated with a token. Learn how to do this securely. ## [Receiving live edits to drafts](/learn/course/visual-editing-with-next-js/fetching-preview-content-in-draft-mode) Add perspectives to your Sanity data fetches to query for draft content, when Draft Mode is enabled. ## [Configuring Presentation](/learn/course/visual-editing-with-next-js/configuring-presentation) Install and configure the Presentation plugin to enable draft preview and a web preview from within Sanity Studio ## [Setup document locations](/learn/course/visual-editing-with-next-js/setup-document-locations) Showing where in the application the document they're editing may be displayed can help content creators understand the impact of their changes. ## [Add drag-and-drop elements](/learn/course/visual-editing-with-next-js/add-drag-and-drop-elements) Go beyond "click-to-edit" with additional affordances for rearranging arrays in your front end ## [Conclusion](/learn/course/visual-editing-with-next-js/conclusions) Let's review # [Users, roles and using roles](/learn/course/introduction-to-users-and-roles) Core concepts around setting up custom access roles and permissions. Help editors work faster by configuring your Studio to provide role-based customizations. ## [Introduction](/learn/course/introduction-to-users-and-roles/introduction) Why – and how – to use custom roles to deliver effective workflows and tailored user experiences. ## [Typical use cases](/learn/course/introduction-to-users-and-roles/typical-use-cases) Motivations for setting up custom roles and permissions in content operations ## [Custom roles and resources](/learn/course/introduction-to-users-and-roles/custom-roles-and-resources) Set up content resources and roles to meet your requirements around security, compliance, workflows and user experience ## [Defining roles](/learn/course/introduction-to-users-and-roles/defining-roles) Combine your resources with permission levels to define which roles can perform which actions ## [Studio customizations](/learn/course/introduction-to-users-and-roles/studio-customizations) Change the user experience of the Sanity Studio based on roles and deliver a personalized user experience to accelerate editor workflows ## [Roles quiz](/learn/course/introduction-to-users-and-roles/roles-quiz) A short test of everything you've learned through this course.