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

Written by Kapehe

Missing Image!

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