Building content-editable websites

Simeon GriggsPrincipal Educator at Sanity

There are no shortcuts to achieving outstanding results. Time spent learning the fundamentals of website development in a modern context will set you up for future success.

There are ready-made templates to create websites.

There are "One-click Deploy" buttons to rapidly get something online.

You'll get something faster with those but learn very little.

This course will teach you how developer teams build production-ready web applications from the ground up and gain an appreciation of Sanity and Next.js from first principles.

To complete this course, you will copy and paste commands, create and modify local files, set up your repository, and deploy from your Vercel account.

Open to enlarge image

Throughout the courses in this track, you'll play the role of a developer tasked with beginning the construction of a web application for a cake-manufacturing superstore, Layer Caker.

By the end of this first course, you will have created and deployed a blog on Next.js using Tailwind CSS for styling and an embedded, configurable content management dashboard called Sanity Studio.

Future courses within this track will continue to expand on this with interactive live previews for Visual Editing and website specifics like page building and SEO. There will also be demonstrations of moving away from presentational thinking and towards structured content.

My name is Simeon Griggs, and I've been building, deploying, and selling content-editable websites for over a decade. I wrote this course to help you make great websites for your end-users, collaborate confidently, and power the best content operations for creators.

Throughout this course, you'll work through lessons with the least friction possible to accelerate your momentum. I've worked with, on, and at Sanity to understand how it is best used. I have also done the research with Next.js to give you best-practice choices, not decision fatigue or burdensome homework.

I wrote this course to do things quickly and correctly. That means a little setup work on your first project, but once you've built a solid foundation, you'll fly through future projects.

You'll learn plenty.

As a developer, you should not be a bottleneck to the availability of accurate and valid content for end-users. Your content creators deserve the tools to perform content operations rapidly without developer intervention.

Content Management Systems (CMSes) have come a long way since monolithic platforms with click-and-play website builders. Sanity Studio—the configurable dashboard you will embed in your Next.js application—is just the CMS part of the Sanity platform which also includes features like a content delivery CDN, asset management and webhooks.

User expectations both to consume and create content are higher than ever. Thankfully, the technology for powering great experiences from content is also more sophisticated.

The first course in this track focuses on the basics of developing a Next.js web application. If you're more experienced and seeking concise guidance on topics like TypeScript and caching, the next-sanity readme might be a better place to start.

To complete this course, you will need the following:

• A free Sanity account to create new projects and initialize a new Sanity Studio. If you do not yet have an account, you'll be prompted later in this course to create one.
• Some familiarity with running commands from the terminal. Wes Bos' Command Line Power User video course is free and can get you up to speed with the basics.
• Node and npm installed (or an npm-compatible JavaScript runtime) to install and run the Next.js development server locally.
• Some familiarity with JavaScript and React. The code examples in this course can all be copied and pasted and are written in TypeScript, but you will not need advanced knowledge of TypeScript to proceed.

If you're stuck or have feedback on the lessons here on Sanity Learn, join the Community Slack or use the feedback form at the bottom of every lesson.

Ready? Let's start by creating a new Next.js application.