TypeScript + Next.js

What this module covers

4 steps · Next.js

1. Step 1. TypeScript + Next.js

   Rename files to .tsx and TypeScript errors appear in the terminal and browser overlay — zero config needed. // app/blog/[slug]/page.tsx type Props = { params: { slug: string }; searchParams: { [key: string]: string | undefined }; }; export default async function Post({ params }: Props) { const post = await getPost(params.slug); return <article>{post.title}</article>; } // Typed Route Handler import { NextRequest, NextResponse } from 'next/server'; interface User { id: number; name: string; role: 'admin' | 'user'; } export function GET(req: NextRequest): NextResponse<User[]> { return NextResponse.json(users); } // Path aliases — tsconfig.json: { "paths": { "@/*": ["./*"] } } import Button from '@/components/Button';

   The params shape you type here must match the dynamic segment folder name exactly — {slug: string} only works because the real route folder is named [slug]. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does Post use the Props type for its params argument?

2. Step 2. Quiz: TypeScript + Next.js

   Answer these questions about typing pages, Route Handlers, and path aliases.

   Page params are typed as a prop matching the dynamic segment; Route Handlers use NextRequest; the @/* alias maps to the project root. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Answer the quiz below.

3. Step 3. Typed Route Handler

   Convert a JavaScript API route to TypeScript. Define a User interface and type the Route Handler's response.

   Typing the response as NextResponse<User[]> means any caller of this route (or any test written against it) gets full autocomplete and type-checking on exactly what shape to expect back. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Is User defined with all three fields, and does GET return NextResponse<User[]>?

4. Step 4. Mini project: TypeScript + Next.js

   Convert a JavaScript API route to TypeScript. Define a User interface and type the Route Handler's response. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   Typing the response as NextResponse<User[]> means any caller of this route (or any test written against it) gets full autocomplete and type-checking on exactly what shape to expect back. This project stage asks you to apply the same idea without step-by-step scaffolding. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Is User defined with all three fields, and does GET return NextResponse<User[]>?