Next.js TypeScript Explained — Type-Safe Next.js Applications

In this tutorial, you will learn about Next.js TypeScript Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Next.js provides first-class TypeScript support with automatic type generation for routes, typed API handlers, inferred props from data fetching, and typed environment variables.

What You'll Learn

• TypeScript setup in Next.js
• Typed page params and searchParams
• Typed API route handlers
• Typed data fetching
• Type-safe environment variables

Why It Matters

TypeScript ensures route parameters match API handlers, props from getStaticProps are properly typed, and API request/response types stay consistent across your application.

// app/posts/[slug]/page.tsx
interface Post {
  id: number;
  title: string;
  content: string;
  author: { name: string; email: string };
}

interface PageProps {
  params: { slug: string };
  searchParams: { preview?: string };
}

export default async function PostPage({ params, searchParams }: PageProps) {
  const post: Post = await fetch(
    `https://api.example.com/posts/${params.slug}${searchParams.preview ? "?preview=true" : ""}`
  ).then(r => r.json());

  return <article>
    <h1>{post.title}</h1>
    <p>By {post.author.name}</p>
    <div>{post.content}</div>
  </article>;
}

// app/api/tasks/[id]/route.ts
import { NextRequest, NextResponse } from "next/server";

interface TaskBody {
  title?: string;
  completed?: boolean;
}

export async function PATCH(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  const body: TaskBody = await request.json();
  const task = await db.updateTask(Number(params.id), body);
  return NextResponse.json(task);
}

Expected output: Full type safety for page params, API route parameters, fetched data, and request/response bodies.