Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Sanity
  • Platform

    Sanity Studio

    Flexible editing environment

    APIs

    Connect to anything

    Content Lake

    Real-time database

    Watch product demo

    Features

    Real-time collaboration

    Fearlessly work with content

    Precise content querying

    Treat content as data with GROQ

    Localization

    Coherent messaging across territories

  • Use cases

    E-commerce

    Richer shopping experiences

    Marketing sites

    Control your story

    Products & services

    Innovate and automate

    Mobile apps

    Content backend for every OS

    View all

    Integrations

    Shopify
    Mux
    Vercel
    Netlify
    Algolia
    Cloudinary
    BigCommerce
    Commerce Layer
    Smartling
    Transifex
    View all
  • Learn

    Documentation
    API reference
    Guides
    GROQ cheat sheet
    Sanity UI
    Get started

    Build and share

    Templates
    Tools and plugins
    Schemas and snippets
    Project showcase
    Share your work
    Browse Exchange

    Frameworks

    React
    Vue
    Next.js
    Nuxt.js
    Svelte
    Remix
    Gatsby
    Astro
    Angular
    Eleventy
    View all
  • Discover

    Blog
    Resource library
    Agency partners
    Become a partner
    Technical support
    Talk to sales

    Case studies

    Puma

    Source of truth for global markets

    Aether

    Unique digital shopping experience

    Morning Brew

    Omnichannel media distribution

    InVision

    Delivering exceptional customer experiences

    View all

    Popular guides

    Headless CMS
    Structured content
    Content modeling
    Headless SEO
    Static websites
    View all
  • Enterprise
  • Pricing
  • Log in
  • Contact sales
  • Get started
Contact salesGet started
Published April 5th 2023

Here’s to learning new things! Next.js 13 & Sanity Studio v3

Everyone needs a personal website to showcase all the amazing work they’ve done! In this full tutorial, we'll build a personal website using Next.js 13 and Sanity.io.

Kapehe

Developer Relations Specialist at Sanity

Everyone needs a personal website to showcase all the amazing work they’ve done! Lucky for you, I recently launched a full tutorial on FreeCodeCamp’s YouTube channel where together we build a personal website using Next.js 13 and Sanity.io. This might be one of my favorite pieces of content I’ve ever made!

Let me introduce you to Next.js 13 and Sanity Studio v3!

A good product knows that it can be better. And both Next.js and Sanity.io have realized that. The engineers at both of these companies are smart… like really smart. And they have made updates and changes we could’ve only dreamed about.

These new features make me so happy. 😍

My 2 favorite Next.js 13 features:

  • The app/ directory — I love this new way of laying out projects. We can now maintain state easier and avoid long and expensive re-renders. And, my favorite favorite thing, we have an advanced way to do routing patterns—we can create “organizational” folders that house the routes which can each have their own layout.
  • React Server Components — If you’ve used Next.js in the past, you are extremely familiar with getStaticProps. Change your old way of thinking with how you fetch data and wrap your head around using fetch in Next.js. fetch is the way we can grab data directly inside a Next.js component. It’ll grab everything server-side and work seamlessly.

More on Next.js 13

My 2 favorite Sanity Studio v3 features:

  • Studio Embedding - Take your entire Sanity Studio and embed it into any frontend framework. That’s right, all your content updating, creating, deleting, etc. can be done at /admin or /studio or /whateveryouwanttocallit! It’s magic!
  • Customization - v3 comes with new APIs for configuration, plugins, form customization, and theming! Oh, and did I mention it now has dark mode?

More on Sanity Studio v3

Happy Coding!

So go ahead and take this wonderful 2-hour journey with me, where we build a personal website using Next.js 13, TailwindCSS, TypeScript, and Sanity.io using Studio v3.

By the end of this video, you’ll have a fully deployed personal website where you can easily add more of your content, showing off all the cool projects you’ve built in your coding career.

Head on over to FreeCodeCamp’s YouTube, and let’s build together! Happy Learning!

To get a boosted free plan with Sanity, head to sanity.io/youtube

Page content

    • My 2 favorite Next.js 13 features:
    • My 2 favorite Sanity Studio v3 features:
  • Happy Coding!

Product

Sanity StudioAPIsContent LakeSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

DocumentationBlogResource libraryCase Studies
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
  • Next.js blog
  • Next.js personal website
  • Clean Next.js + Sanity app
  • Clean Remix + Sanity app
  • Clean SvelteKit + Sanity app
  • All Templates
  • Agency partners
  • Technology partners
  • Headless CMS 101
  • What is an API CMS
  • Static Sites 101
  • Headless Commerce 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • Content as a Service
  • What is a DXP?
  • Typescript 101
  • Ecommerce SEO
  • CMS for enterprise
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS

Company

Contact SalesEnterpriseCareersTerms of ServicePrivacy PolicyAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023