How to type Sanity posts in TypeScript + Next.js?

You'll want to use Sanity TypeGen to automatically generate TypeScript types for your posts! This is the recommended approach that eliminates manual type definitions.

Quick Setup

First, generate types from your schema and queries:

npx sanity typegen generate

This creates a sanity.types.ts file with types for all your schema documents.

Update Your Code

Here's how to properly type your component using the generated types:

import { defineQuery } from 'next-sanity'
import type { POST_QUERYResult } from '@/sanity.types' // adjust path as needed

const POST_QUERY = defineQuery(`*[_type == "post"] | order(publishedAt desc)`)

export async function getStaticProps() {
  const posts = await sanity.fetch(POST_QUERY);
  // posts is now automatically typed!
  
  return {
    props: {
      posts
    }
  };
}

interface IndexProps {
  posts: POST_QUERYResult
}

export default function Index({ posts }: IndexProps) {
  return (
    <div>
      <h1>Welcome to a blog!</h1>
      {posts.map(({ _id, title = '', slug, _updatedAt = '' }) =>
        slug && (
          <li key={_id}>
            <Link href={`/blog/post/${slug.current}`}>
              {title}
            </Link>{' '}
            ({new Date(_updatedAt).toDateString()})
          </li>
        )
      )}
    </div>
  );
}

How It Works

The defineQuery helper does two things:

1. Enables syntax highlighting for your GROQ queries (with the Sanity VS Code extension)
2. Tells TypeGen to generate types for that specific query result

When you run npx sanity typegen generate, it scans your code for defineQuery calls and creates corresponding TypeScript types named after your variable (e.g., POST_QUERY becomes POST_QUERYResult).

Pro Tips

• Re-run npx sanity typegen generate whenever you change your schema or queries
• You can add a script to your package.json: "typegen": "sanity typegen generate"
• The types are automatically inferred when using client.fetch(), so TypeScript knows exactly what shape your data is

This approach is much better than manually creating types because your types stay in sync with your actual schema and queries automatically! If you want more control over runtime validation, there's also groqd, but for most cases the built-in TypeGen is the way to go.