Why TypeScript + Next.js?

TypeScript and Next.js are a match made in developer heaven. Next.js 15 ships with first-class TypeScript support, making it easier than ever to build type-safe, performant web applications.

Setting Up Your Project

npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npm run dev

Project Structure

my-app/
├── app/
│   ├── layout.tsx        # Root layout
│   ├── page.tsx          # Home page
│   ├── loading.tsx       # Loading UI
│   ├── error.tsx         # Error UI
│   └── api/
│       └── hello/
│           └── route.ts  # API route
├── components/
│   ├── Header.tsx
│   └── Footer.tsx
├── lib/
│   └── utils.ts
├── types/
│   └── index.ts
├── next.config.ts
├── tsconfig.json
└── package.json

Defining Types

// types/index.ts
export interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'editor';
  createdAt: Date;
}
export interface Post {
  id: string;
  title: string;
  content: string;
  author: User;
  tags: string[];
  publishedAt: Date;
  status: 'draft' | 'published';
}
export type ApiResponse = {
  data: T;
  error: null;
} | {
  data: null;
  error: string;
};

Building Components

// components/PostCard.tsx
import { Post } from '@/types';
interface PostCardProps {
  post: Post;
  onLike?: (postId: string) => void;
  featured?: boolean;
}
export default function PostCard({ post, onLike, featured = false }: PostCardProps) {
  return (
    

      
{post.title}
      
{post.content.slice(0, 150)}...
      

        By {post.author.name}
        {onLike && (
           onLike(post.id)}>Like
        )}
      
    
  );
}

Server Components with Types

// app/posts/page.tsx
import { Post } from '@/types';
async function getPosts(): Promise {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // ISR: revalidate every hour
  });
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
}
export default async function PostsPage() {
  const posts = await getPosts();
  
  return (
    

      
All Posts
      

        {posts.map(post => (
          
        ))}
      
    
  );
}

API Routes with Type Safety

// app/api/posts/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { Post, ApiResponse } from '@/types';
export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const page = parseInt(searchParams.get('page') || '1');
  
  // Type-safe response
  const response: ApiResponse = {
    data: [], // fetch from database
    error: null
  };
  
  return NextResponse.json(response);
}
export async function POST(request: NextRequest) {
  const body = await request.json();
  
  // Validate and type-check the body
  if (!body.title || !body.content) {
    return NextResponse.json(
      { data: null, error: 'Title and content are required' },
      { status: 400 }
    );
  }
  
  return NextResponse.json({ data: body, error: null }, { status: 201 });
}

Best Practices

• Always define interfaces for your data structures
• Use strict mode in tsconfig.json
• Leverage discriminated unions for API responses
• Use Zod for runtime validation alongside TypeScript
• Enable incremental builds for faster compilation

Conclusion

TypeScript + Next.js 15 provides an incredible developer experience. The type safety catches bugs before they reach production, and Next.js's built-in optimizations ensure your app is fast by default.