Setting Up TypeScript For Sanity In NextJS

You can use Sanity TypeGen to generate TypeScript types for schema types and GROQ query results in your Next.js application. If you've used sanity init with the embedded Studio option, it's already available.

[!TIP] Sanity TypeGen generates types for queries that are assigned to a variable and use either the groq template literal or defineQuery function.

If your Sanity Studio schema types exist in a separate project or repository, you can configure Sanity TypeGen to write types to your Next.js project.

Create a sanity-typegen.json file at your project's root to configure Sanity TypeGen:

// sanity-typegen.json 

{ 
"path": "./src/**/*.{ts,tsx,js,jsx}", 
"schema": "./src/sanity/extract.json", 
"generates": "./src/sanity/types.ts"
 }

Note: This configuration places the generated types and schema extraction within the /src/sanity directory instead of the default root location. This aligns with the schema extraction path specified in the package.json scripts below.

Run this command to extract your Sanity Studio schema to a JSON file each time your schema types change:

npx sanity@latest schema extract

Run this command to generate TypeScript types for your Sanity Studio schema and GROQ queries and each time your schema types or GROQ queries change:

npx sanity@latest typegen generate

Update your Next.js project's package.json to execute both commands with npm run typegen:

"scripts": { 
"predev": "npm run typegen", 
"dev": "next", 
"prebuild": "npm run typegen", 
"build": "next build", 
"start": "next start", 
"lint": "next lint", 
"typegen": "sanity schema extract --path=src/sanity/extract.json && sanity typegen generate" 
},

Using query result types

Sanity TypeGen creates TypeScript types for your GROQ query results. You can use these types explicitly as generics:

import {client} from '@/sanity/lib/client' 
import {POSTS_QUERY} from '@/sanity/lib/queries' 
import {POSTS_QUERYResult} from '@/sanity/types'
const posts = await client.fetch<POSTS_QUERYResult>(POSTS_QUERY)

However, automatic type inference offers a simpler approach. When GROQ queries are wrapped in defineQuery, types are inferred automatically:

import {client} from '@/sanity/lib/client' 
import {POSTS_QUERY} from '@/sanity/lib/queries'
const posts = await client.fetch(POSTS_QUERY)