# Course: Content-driven web application foundations
https://www.sanity.io/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.
---
## Navigation
**Track:** [Work-ready Next.js](https://www.sanity.io/learn/track/work-ready-next-js) · [View as markdown](https://www.sanity.io/learn/track/work-ready-next-js.md)
## Contents
1. [Building content-editable websites](https://www.sanity.io/learn/course/content-driven-web-application-foundations/building-a-content-editable-website) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/building-a-content-editable-website.md)
2. [Create a new Next.js 16 application](https://www.sanity.io/learn/course/content-driven-web-application-foundations/create-a-new-next-js-application) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/create-a-new-next-js-application.md)
3. [Create a new Sanity project](https://www.sanity.io/learn/course/content-driven-web-application-foundations/create-a-new-sanity-project) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/create-a-new-sanity-project.md)
4. [The next-sanity toolkit](https://www.sanity.io/learn/course/content-driven-web-application-foundations/the-next-sanity-toolkit) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/the-next-sanity-toolkit.md)
5. [Query content with GROQ](https://www.sanity.io/learn/course/content-driven-web-application-foundations/writing-groq-queries) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/writing-groq-queries.md)
6. [Generate TypeScript Types](https://www.sanity.io/learn/course/content-driven-web-application-foundations/generate-typescript-types) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/generate-typescript-types.md)
7. [Fetch Sanity Content](https://www.sanity.io/learn/course/content-driven-web-application-foundations/fetch-sanity-content) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/fetch-sanity-content.md)
8. [Git-based workflows](https://www.sanity.io/learn/course/content-driven-web-application-foundations/git-based-workflows) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/git-based-workflows.md)
9. [Go live on Vercel](https://www.sanity.io/learn/course/content-driven-web-application-foundations/deploy-to-vercel) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/deploy-to-vercel.md)
10. [Displaying images](https://www.sanity.io/learn/course/content-driven-web-application-foundations/displaying-images) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/displaying-images.md)
11. [Block content and rich text](https://www.sanity.io/learn/course/content-driven-web-application-foundations/block-content-and-rich-text) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/block-content-and-rich-text.md)
12. [Build up the blog](https://www.sanity.io/learn/course/content-driven-web-application-foundations/build-up-the-blog) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/build-up-the-blog.md)
13. [Fundamentals quiz](https://www.sanity.io/learn/course/content-driven-web-application-foundations/fundamentals-quiz) · [markdown](https://www.sanity.io/learn/course/content-driven-web-application-foundations/fundamentals-quiz.md)
---
## Lesson 1: Building content-editable websites
https://www.sanity.io/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.
> [Video: Building content-editable websites](https://www.sanity.io/learn/course/content-driven-web-application-foundations/building-a-content-editable-website)
> [!WARNING]
> The videos in this course, in parts, are out of step with the written lessons. Follow the lesson text and code examples for the latest implementation best practices.
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.
## About this course
There are [ready-made templates](https://www.sanity.io/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.
### Building "Layer Caker"
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.
### About the author
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.
### Why build a content-driven website?
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.
## Getting started
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](https://github.com/sanity-io/next-sanity) might be a better place to start.
### Prerequisites
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](https://commandlinepoweruser.com/) video course is free and can get you up to speed with the basics.
- [Node and npm installed](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) (or [an npm-compatible JavaScript runtime](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management#what_exactly_is_a_package_manager)) to install and run the Next.js development server locally.
- [`pnpm` installed](https://pnpm.io), though you could swap out commands for `npm`
- 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](https://slack.sanity.io/) or use the feedback form at the bottom of every lesson.
Ready? Let's start by creating a new Next.js application.
---
## Lesson 2: Create a new Next.js 16 application
https://www.sanity.io/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.
> [Video: Create a new Next.js 16 application](https://www.sanity.io/learn/course/content-driven-web-application-foundations/create-a-new-next-js-application)
There are many technology choices available to make a web application. So why was Next.js chosen for this course?
- JavaScript is the most popular programming language for writing server and client web applications.
- React is the most popular library for writing JavaScript-powered applications.
- By a large margin, Next.js is the most popular meta-framework for React.
- Next.js also has a large community following for extra support and useful utilities.
- It also has an excellent deployment developer experience with Vercel.
- Best of all, Next.js has a tight integration with Sanity.
In short, if your day job involves building web applications on a developer team, there's a good chance you're doing it with Next.js.
Next.js is not without its challenges. It typically operates at the leading edge of React, so you may interact with React features not yet considered stable. Some architectural decisions, such as caching, can cause confusion. However, this course aims to demystify some of these challenges.
## Create a new Next.js application
- [ ] **Run** the following command to create a new Next.js application:
```sh
pnpm dlx create-next-app@16 layer-caker --typescript --tailwind --eslint --app --src-dir --import-alias="@/*" --turbopack --react-compiler
```
The options in the command above configure your app to use:
- TypeScript
- [Tailwind CSS](https://tailwindcss.com/)
- [eslint](https://eslint.org/)
- The [App router](https://nextjs.org/docs/app)
- A `src` directory for your application's files
- The default import alias for your application's files
- Turbopack
- React Compiler
These are all the default settings for a new Next.js application. The flags in the command above save you from having to select these options.
You may modify the command above to make different choices, but the following lessons contain code snippets that assume these are the settings you used.
- [ ] **Run** the development server
```sh
pnpm run dev
```
Your app should start up in the terminal in development mode:
```
> layer-caker@0.1.0 dev
> next dev
▲ Next.js 16.0.1 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.4.154:3000
✓ Starting...
✓ Ready in 591ms
```
Open [http://localhost:3000](http://localhost:3000). You should see the default home page for a new Next.js application like the one below:
As recommended, you can edit the `src/app/page.tsx` file and see updates instantly. In the following lessons, you'll be given code examples to update this home page route and create new pages.
## Update Tailwind CSS implementation
> [!WARNING]
> The video for this lesson shows Tailwind 3 configuration, but you now have Tailwind 4 installed. Follow the code examples below.
The Next.js starter has fonts and styles you don't need for this course, so you'll remove them for simplicity.
- [ ] **Update **`layout.tsx` to remove custom fonts
```tsx:src/app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{children}
);
}
```
- [ ] **Update** `globals.css` to remove anything other than Tailwind's import
```css:src/app/globals.css
@import "tailwindcss";
```
The app in development should still look mostly the same. You'll add more content and styling in the following lessons.
You now have a Next.js application with Tailwind CSS for styling. However, it lacks content management, so the next step is to set up a Sanity account and initialize Sanity Studio inside your Next.js project.
---
## Lesson 3: Create a new Sanity project
https://www.sanity.io/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.
> [Video: Create a new Sanity project](https://www.sanity.io/learn/course/content-driven-web-application-foundations/create-a-new-sanity-project)
For your Next.js application, Sanity will play the role of content storage for documents and assets such as images. That content is cloud-hosted in what we call the Sanity [Store and query structured content](https://www.sanity.io/learn/content-lake).
In this lesson, you'll create a new project at Sanity and embed an editing interface—[Studio](https://www.sanity.io/learn/sanity-studio)—inside the Next.js application. An embedded Studio allows you to create, edit, and publish content hosted in the Content Lake from your Next.js application's development environment or wherever it is deployed.
The Sanity Content Lake also powers content operations workflows, such as firing fine-grained [GROQ-powered webhooks](https://www.sanity.io/learn/content-lake/webhooks) so your business can react to content changes as they happen. In time, your Next.js application may also *write* content – such as comments and likes – into the Content Lake from the front end.
While this course focuses on building a web application, Sanity is more than a website-focused CMS (content management system).
In a nutshell, Sanity is a *Content Operating System*, with a configurable, React-based administration panel, cloud-hosted data storage, and a worldwide CDN for content delivery.
## Create a new project
The Sanity CLI can initialize a new Sanity project within a Next.js application. It detects the framework during the process and prompts you to make appropriate choices.
If you do not yet have a Sanity account, follow the prompts to create one.
> [!NOTE]
> You can create new free Sanity projects at any time.
- [ ] **Run** the following command inside your Next.js application to create a new free project from the command line:
```sh
pnpm dlx sanity@latest init
```
When prompted, make the following selections. If you accidentally select the wrong option, you can cancel and re-run the command again.
- [ ] **Create** a new project, call it what you like, for example `layer-caker`
- [ ] **Create** a dataset with the default settings: public and named `production`
- [ ] **Add** configuration files to the Next.js folder
- [ ] **Use **TypeScript
- [ ] **Embed** Sanity Studio at `/studio`
- [ ] **Select** the `blog` template
- [ ] **Add** your project details to an `.env.local` file
### What just happened?
This command:
1. Created a new Sanity **project** and **dataset**, which are remotely configured and hosted on the Content Lake
1. A **dataset** is a collection of content (text and assets) within a project hosted in the Sanity [Store and query structured content](https://www.sanity.io/learn/content-lake).
2. A **project** can have many datasets and is also where you'd configure other project-level settings like members, webhooks, and API tokens.
2. Added relevant files to your local Next.js application and installed some dependencies that you'll need to get started.
Your Sanity Studio code in the Next.js application is like a "window" into the remotely hosted content. Your Studio configuration code determines which document types are available to create, update, and delete. All the content you author is hosted in the Content Lake.
In short, with Sanity:
- **Studio configuration** is performed locally with code.
- **Content **(text and assets) is hosted remotely.
- **Project configuration** is handled at [sanity.io/manage](https://www.sanity.io/manage).
### New project files
**In addition to** your Next.js files, you should have the following files in your project. These files configure:
- Sanity Studio for creating content
- Sanity Client for querying content
- A helper file to display images on the front end, `src/sanity/lib/image.ts`
```
.
├── .env.local
├── sanity.cli.ts
├── sanity.config.ts
├── (...and all your Next.js files)
└── src
├── app
│ └── studio
│ └── [[...tool]]
│ └── page.tsx
└── sanity
├── lib
│ ├── client.ts
│ ├── image.ts
│ ├── live.ts
├── schemaTypes
│ ├── authorType.ts
│ ├── blockContentType.ts
│ ├── categoryType.ts
│ ├── postType.ts
├── env.ts
└── schema.ts
```
### Hello, Sanity Studio
Browse your embedded Sanity Studio route at [http://localhost:3000/studio](http://localhost:3000/studio) to see your built-in content management system.
Make sure you log in with the same credentials you used to log in to the Sanity CLI in your terminal.
> [!WARNING]
> If you see the Studio but not these three document types (posts, categories, authors) on the left-hand side, you may have chosen the "clean" template instead. Re-run the `sanity init` command above to change.
You're embedding the Sanity Studio within the Next.js application for the convenience of managing everything in one repository**.** It's also convenient for authors to only need to know one URL for their front end and content administration. However, it can promote website-specific thinking.
> [!NOTE]
> Remember, content representing your business goes far beyond a few web pages. For now you only have blog content schema types in your Sanity Studio, but you can expand it to much more!
Fortunately, if you ever decide to separate your Sanity Studio into its repository—or both applications into a mono repo—it should be a straightforward process of moving the configuration files around. The data storage of your text and assets would remain unchanged in the Content Lake.
The `blog` template gave you three website-specific schema types: `post`, `category` and `author`. You can now create content of these types within your embedded Sanity Studio.
## Create and publish posts
Soon, you'll be querying for content on the front end. For this to work, you'll need to create some.
- [ ] **Create** and **Publish** at least one `post` document type
### Or use our seed data
We have prepared a dataset for you to speed up the process. You can optionally download and import this into your project.
> [!TIP]
> Download `production.tar.gz` – a pre-prepared dataset backup with assets, posts, categories, and authors.
Place this file in the root of your project and import it using the CLI.
```sh:Terminal
pnpm dlx sanity dataset import production.tar.gz production
```
Delete the backup file once the import successfully completes.
```sh:Terminal
rm production.tar.gz
```
You have content in your Studio, but your front-end is not yet configured to display it. In the next lesson, let's unpack the bridge between your Sanity content and front-end.
---
## Lesson 4: The next-sanity toolkit
https://www.sanity.io/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.
> [Video: The next-sanity toolkit](https://www.sanity.io/learn/course/content-driven-web-application-foundations/the-next-sanity-toolkit)
One of the dependencies automatically installed during `sanity init` in the last lesson was [`next-sanity`](https://github.com/sanity-io/next-sanity), a collection of utilities and conventions for data fetching, live updates, Visual Editing, and more. You could look through the readme for full details on what it provides.
For now, let's examine some of the files that were automatically created in the previous lesson and explain their purpose.
## Environment variables
A `.env.local` file should have been created with your Sanity project ID and dataset name. These are not considered sensitive, and so are prepended with `NEXT_PUBLIC_`.
> [!TIP]
> See the Next.js documentation about [public and private environment variables](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables).
In future lessons, you'll add secrets and tokens to this file. It is important that you **do not** check this file in your Git repository. Also, remember that values in this file will need to be recreated when deploying the application to hosting. We'll remind you of this when we get there.
- [ ] **Confirm** you have an `.env.local` file at the root of your application.
```scss:.env.local
NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id"
NEXT_PUBLIC_SANITY_DATASET="production"
```
Additionally, a file to retrieve, export, and confirm these values exist has been written to `src/sanity/env.ts`
> [!NOTE]
> You can use Sanity CLI to update these values with a new or existing Sanity project by running `sanity init` again with the `--env` flag
```sh
pnpm dlx sanity@latest init --env
```
## Sanity Client
The file `client.ts` contains a lightly configured instance of Sanity Client.
```typescript:src/sanity/lib/client.ts
import { createClient } from 'next-sanity'
import { apiVersion, dataset, projectId } from '../env'
export const client = createClient({
projectId,
dataset,
apiVersion,
useCdn: true,
})
```
Sanity Client is a JavaScript library commonly used to interact with Sanity projects. Its most basic function is querying content, but once authenticated with a token, it can interact with almost every part of a Sanity project.
> [!TIP]
> See more about what [Sanity Client](https://www.sanity.io/docs/js-client) can do
You won't need to change the Sanity Client configuration now, but it is good to know where to make modifications later.
### sanityFetch and SanityLive
In the file `live.ts`, the preconfigured client is used to export a function `sanityFetch`, and the component `SanityLive`.
```typescript:src/sanity/lib/live.ts
import { defineLive } from "next-sanity/live";
import { client } from "@/sanity/lib/client";
export const { sanityFetch, SanityLive } = defineLive({client});
```
- `sanityFetch` is a helper function to perform queries, and under the hood it handles the integration with Next.js tag-based caching and revalidation, as well as Draft Mode.
- `SanityLive` is a component which creates a subscription to the [Live Content API](https://www.sanity.io/learn/content-lake/live-content-api) and will automatically revalidate content as it changes.
These two exports are the foundation of "Live by default" experiences in Next.js applications. In future lessons you'll implement these and learn how they work.
## Sanity Config and CLI
The two root files `sanity.cli.ts` and `sanity.config.ts` are important for interacting with your project:
- `sanity.cli.ts` allows you to run CLI commands (like `dataset import` from the previous lesson) that affect the project while targeting the correct project ID and dataset
- `sanity.config.ts` is used to configure the Sanity Studio, including schema types, plugins, and more.
- [ ] Run the following command to show project details:
```sh
pnpm dlx sanity@latest debug
```
## Schema Types
In the `src/sanity/schemaTypes` folder are files for the three document types and one custom type which you can see in the Studio.
You're able to create `category`, `post` and `author` type documents because these have been registered to the Studio configuration.
Datasets are schemaless, so data of any shape could be *written* into a dataset. But these are the only schema types currently configured in the *Studio*. In future lessons, you'll change and add to these schema types, but they give us enough to work with now.
> [!TIP]
> See [Improving the editorial experience](https://www.sanity.io/learn/course/studio-excellence/improving-the-editorial-experience) in [Day one content operations](https://www.sanity.io/learn/course/day-one-with-sanity-studio) to see how basic schema type configurations can be dramatically enhanced.
You now have a Next.js application with an embedded Sanity Studio for creating and publishing content. It's time to start integrating them.
Writing GROQ queries is the most common method of querying content from Sanity. In the next lesson, we'll set up conventions for this.
---
## Lesson 5: Query content with GROQ
https://www.sanity.io/learn/course/content-driven-web-application-foundations/writing-groq-queries
Organize and author queries for your content with best-practice conventions.
> [Video: Query content with GROQ](https://www.sanity.io/learn/course/content-driven-web-application-foundations/writing-groq-queries)
If you're new to Sanity, you're probably new to GROQ. It's an incredibly powerful way to query content, and thankfully, it's quick to get started with.
You'll only need to know the basics of writing queries for now. However, it is beneficial to learn GROQ when working with Sanity as it powers queries, [GROQ-powered webhooks](https://www.sanity.io/learn/content-lake/webhooks) and content permissions when configuring [Roles](https://www.sanity.io/learn/user-guides/roles).
This lesson is focused on writing basic GROQ queries to serve our Next.js application. Future lessons will expand on these queries.
> [!TIP]
> See [Between GROQ and a hard place](https://www.sanity.io/learn/course/between-groq-and-a-hard-place) for more thorough lessons on how to write expressive queries with GROQ.
> [!TIP]
> The [Query Cheat Sheet - GROQ](https://www.sanity.io/learn/content-lake/query-cheat-sheet) is the most popular resource for quickly finding useful query examples.
## What about GraphQL?
Sanity content is typically queried with GROQ queries from a configured Sanity Client. [Sanity also supports GraphQL](https://www.sanity.io/docs/graphql?utm_source=github&utm_medium=readme&utm_campaign=next-sanity). You may prefer to use GraphQL in your application, but these courses will focus on querying with Sanity Client and GROQ.
## GROQ basics
You can break up most GROQ queries into three key parts.
Consider this query:
```groq
*[_type == "post"]{title}
```
- `*`: returns **all documents** in a dataset as an array
- `[_type == "post"]` represents a **filter **where you narrow down the proceeding array
- `{ title }` represents a **projection** where you define which **attributes** in those array items you want to return in the response
## Organizing GROQ queries
`next-sanity` exports the `defineQuery` function which will give you syntax highlighting in VS Code with the Sanity extension installed.
- [ ] **Install** the [Sanity VS Code extension](https://marketplace.visualstudio.com/items?itemName=sanity-io.vscode-sanity) if this is the IDE you are using.
The `defineQuery` function also has another important role, [Sanity TypeGen](https://www.sanity.io/learn/apis-and-sdks/sanity-typegen) searches for variables that use it to generate Types for query results.
For convenience and organization, you'll write all queries inside a dedicated file in your project.
- [ ] **Create** a file to store two basic GROQ queries:
```typescript:src/sanity/lib/queries.ts
import {defineQuery} from 'next-sanity'
export const POSTS_QUERY = defineQuery(`*[_type == "post" && defined(slug.current)][0...12]{
_id, title, slug
}`)
export const POST_QUERY = defineQuery(`*[_type == "post" && slug.current == $slug][0]{
title, body, mainImage
}`)
```
- `POSTS_QUERY` will return an array of up to 12 published documents of the type `post` that have a slug. From each document, it will return the `_id`, `title` and `slug` attributes.
- This can be used on a "posts index" page to show the latest posts.
- `POST_QUERY` filters down to `post` documents of the post type where the value the `slug` matches a passed-in variable `$slug`. Only one document is returned because of the `[0]` filter. From this one document, it will return the `title`, `body` and `mainImage` attributes.
### Testing GROQ queries
Before using these queries in your front end, it's possible to test them at any time from within your Sanity Studio using the Vision tool.
- [ ] **Open** [http://localhost:3000/studio/vision](http://localhost:3000/studio/vision), paste the `POSTS_QUERY` GROQ query string and click **Fetch**
```groq
*[_type == "post" && defined(slug.current)][0...12]{
_id, title, slug
}
```
You should see up to 12 items in the "result" panel.
Queries fetched in Vision use the same user authentication that the Studio does. So it will return private documents when using the [default perspective](https://www.sanity.io/learn/docs/content-lake/perspectives) – `raw`.
> [!NOTE]
> In a **public** dataset, a document is private if it has a period "`.`" in the `_id`, such as `{ _id: "drafts.asdf-1234" }` and can only be queried by an authenticated request. In a **private** dataset all documents are private.
The Sanity Client for your front end is not authenticated (unless you give it `token`) so it will only return publicly visible documents in a public dataset.
> [!TIP]
> See [Datasets](https://www.sanity.io/learn/content-lake/datasets) for more information about Public and Private datasets.
> [!TIP]
> [Perspectives for Content Lake](https://www.sanity.io/learn/content-lake/perspectives) determine whether published or draft documents are returned in the response.
Now that you've proven that your GROQ queries get results, let's automatically generate TypeScript types for these responses.
---
## Lesson 6: Generate TypeScript Types
https://www.sanity.io/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.
> [Video: Generate TypeScript Types](https://www.sanity.io/learn/course/content-driven-web-application-foundations/generate-typescript-types)
In the case of working with [Sanity TypeGen](https://www.sanity.io/learn/apis-and-sdks/sanity-typegen), it can create Types for Sanity Studio schema types and GROQ query results. So, as you build out your front end, you only access values within documents that exist, as well as defensively code against values that could be `null`.
> [!TIP]
> The [Generating types](https://www.sanity.io/learn/course/day-one-with-sanity-studio/generating-types) Lesson has a more in-depth exploration of the `sanity typegen` command.
Sanity TypeGen will [create Types for queries](https://www.sanity.io/docs/sanity-typegen#c3ef15d8ad39) that are assigned to a variable and use the `defineQuery` function.
> [!NOTE]
> Note: The video in this lesson shows the older configuration method using sanity-typegen.json. As of Sanity CLI version 4.19.0, typegen configuration should be added to sanity.cli.ts instead. The instructions below reflect the current recommended approach.
## Extracting schema
You're able to use the Sanity CLI from inside the Next.js application because of the `sanity.cli.ts` file at the root of your project.
- [ ] **Run** the following command in your terminal
```sh
pnpm dlx sanity@latest schema extract --path=./src/sanity/extract.json
```
> [!NOTE]
> Re-run this every time you modify your schema types
The `--path` argument is provided so the schema file is written to the same folder as all our other Sanity utilities.
You should see a response like the one below and a newly generated `extract.json` file in your `src/sanity` directory
```sh
✅ Extracted schema
```
This file contains all the details about your Sanity Studio schema types, which TypeGen will need to create types from.
## Generating types
By default, TypeGen will create a file for types at the project's root. To keep Sanity-specific files colocated, you'll configure TypeGen in your `sanity.cli.ts` file to keep the project root tidy.
> [!WARNING]
> Without this configuration, Typegen will look for your schema in the default named `schema.json` file instead of the `extract.json` file we have created.
- [ ] **Update** the `sanity.cli.ts` file at the root of your project
```typescript:sanity.cli.ts
import {defineCliConfig} from 'sanity/cli'
export default defineCliConfig({
api: {
projectId: 'your-project-id',
dataset: 'your-dataset',
},
typegen: {
path: './src/**/*.{ts,tsx,js,jsx}',
schema: './src/sanity/extract.json',
generates: './src/sanity/types.ts'
},
})
```
The `typegen` configuration will:
1. Scan the `src` directory for GROQ queries to create Types.
2. Additionally, use the `extract.json` file created during the previous task.
3. Write a new `types.ts` file with our other Sanity utilities.
- [ ] **Run** the following command in your terminal
```sh
pnpm dlx sanity@latest typegen generate
```
> [!NOTE]
> Re-run this every time you modify your schema types or GROQ queries
You should see a response like the one below and a newly created `src/sanity/types.ts` file in your project.
```sh
✅ Generated TypeScript types for 15 schema types and 2 GROQ queries in 1 files into: ./src/sanity/types.ts
```
Success! You now have Types for your Sanity Studio schema types and GROQ queries.
## Automating TypeGen
The `extract.json` file will need to be updated every time you update your Sanity Studio schema types and TypeGen every time you do or update your GROQ queries.
Instead of doing these steps separately, you can include scripts in your `package.json` file to make running these automatic and more convenient.
- [ ] Update `package.json` scripts
```json:package.json
"scripts": {
// ...all your other scripts
"predev": "pnpm run typegen",
"prebuild": "pnpm run typegen",
"typegen": "sanity schema extract --enforce-required-fields --path=./src/sanity/extract.json && sanity typegen generate"
},
```
You can now run both the schema extraction and TypeGen commands with one line:
```sh
pnpm run typegen
```
You now have all the tools and configurations to author and query Sanity content with a Type-safe, excellent developer experience. Now it's finally time to query and display Sanity content.
## Automatic type inference
Sanity TypeGen contains a feature to map GROQ queries against their types automatically. However, this is done by extending the Sanity Client package, as you will see at the bottom of the automatically generated types file.
```typescript:src/sanity/types.ts
// Query TypeMap
import "@sanity/client";
declare module "@sanity/client" {
```
Since we are using the next Sanity package and have not installed Sanity Client directly, this automatic type inference may not work.
**Install** Sanity Client as a dependency to solve this before the next lesson.
```sh
pnpm add @sanity/client
```
---
## Lesson 7: Fetch Sanity Content
https://www.sanity.io/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.
> [Video: Fetch Sanity Content](https://www.sanity.io/learn/course/content-driven-web-application-foundations/fetch-sanity-content)
Sanity content is typically queried with GROQ queries from a configured [Sanity Client](https://www.sanity.io/docs/js-client). Fortunately, one has already been created for you.
- [ ] **Open** `src/sanity/lib/client.ts` to confirm it exists in your project.
Sanity Client is built to run in any JavaScript run time and in any framework. It is also compatible with Next.js caching features, React Server Components, and the App Router.
It also provides ways to interact with Sanity projects and even write content back to the Content Lake with mutations. You'll use some of these features in later lessons.
It's time to put everything we've set up to work. In this lesson, you'll create a route to serve as a Post index page and a dynamic route to display an individual post.
## Next.js App Router
For now, you'll focus on data fetching at the top of each route. React Server Components allow you to perform fetches from inside individual components. Future lessons may address where this is beneficial. For now, our queries are simple enough – and GROQ is expressive enough – to get everything we need at the top of the tree.
> [!TIP]
> See the [Next.js App Router](https://nextjs.org/docs/app/building-your-application/routing) documentation for more details about file-based routing and how file and folder names impact URLs
The most significant change we'll make first is creating a separate "Route Group" for the entire application front end. This route group will separate the front end layout code from the Studio without affecting the URL. It is also useful when integrating Visual Editing and displaying the front end *inside* the Studio.
- [ ] **Create** a new `(frontend)` directory and **duplicate** `layout.tsx` into it
```sh
mkdir -p "src/app/(frontend)" && cp "src/app/layout.tsx" "src/app/(frontend)/"
```
You should now have **two** `layout.tsx` files inside the app folder at these locations:
```
src
└── app
├── // all other files
├── layout.tsx
└── (frontend)
└── layout.tsx
```
The `(frontend)/layout.tsx` file has duplicated `html` and `body` tags, but you'll update the file those later in the lesson.
- [ ] **Update **the root `layout.tsx` file to remove `globals.css`
## Update the home page
Later in this track, the home page will become fully featured. For now, it just needs a link to the posts index.
- [ ] **Move** `page.tsx` into the `(frontend)` folder
- [ ] **Update** your home page route to add basic navigation to the posts index.
```tsx:src/app/(frontend)/page.tsx
import Link from "next/link";
export default async function Page() {
return (