TypeScript with React & Next.js

Making Modern Development Comfortable

Why TypeScript + React is a Perfect Match

Component Props
Never guess what props a component expects
.ts
interface ButtonProps {
    text: string
    onClick: () => void
    disabled?: boolean
}

function Button({ text, onClick, disabled }: ButtonProps) {
    return <button onClick={onClick} disabled={disabled}>{text}</button>
}
State Management
Type-safe state updates and effects
.ts
const [user, setUser] = useState<User | null>(null)

// TypeScript knows user might be null
if (user) {
    console.log(user.name) // ✅ Safe!
}

Common React Patterns with TypeScript

Functional Components
The most common pattern you"ll use
.ts
// Simple component with props
interface WelcomeProps {
    name: string
    age?: number
}

export function Welcome({ name, age }: WelcomeProps) {
return (
    <div>
        <h1>Hello, {name}!</h1>
        {age && <p>You are {age} years old</p>}
    </div>
)
}

// Usage - TypeScript will help with autocomplete!
<Welcome name="Alice" age={25} />

TypeScript + Next.js = Developer Happiness

API Routes
Type-safe API endpoints
.ts
// pages/api/users/[id].ts
import type { NextApiRequest, NextApiResponse } from 'next'

interface User {
    id: string
    name: string
    email: string
}

export default function handler(
    req: NextApiRequest,
    res: NextApiResponse<User | { error: string }>
) {
    const { id } = req.query
    if (typeof id !== 'string') {
    return res.status(400).json({ error: 'Invalid ID' })
}

// TypeScript knows the response type!
res.json({ id, name: 'John', email: 'john@example.com' })
}
Server Components
Type-safe server-side rendering
.ts
// app/users/[id]/page.tsx
interface PageProps {
    params: { id: string }
}

async function getUser(id: string): Promise<User> {
    const res = await fetch(`/api/users/{id}`)
    return res.json()
}

export default async function UserPage({ params }: PageProps) {
    const user = await getUser(params.id)
    
    return (
        <div>
        <h1>{user.name}</h1>
        <p>{user.email}</p>
        </div>
    )
}

Getting Started is Easy!

1
Create React App
npx create-react-app my-app --template typescript

Start with TypeScript from day one

2
Next.js App
npx create-next-app@latest --typescript

Next.js with TypeScript built-in

3
Existing Project
npm install typescript @types/react @types/node

Add TypeScript to existing projects

Why This Makes Development Comfortable

IntelliSense everywhere - Your editor knows exactly what props, methods, and properties are available
Catch bugs early - No more "Cannot read property of undefined" runtime errors
Refactor with confidence - Rename components, props, or functions across your entire codebase safely
Better team collaboration - Component interfaces serve as documentation
Gradual adoption - Start with .tsx files, add types as you go
Same React you know - Just with better tooling and safety

You"re Already in Your Comfort Zone!

If you know React, you already know 90% of what you need for TypeScript + React. The remaining 10% is just adding type annotations that make your life easier.

Same JSXSame HooksSame ComponentsSame Patterns+ Type Safety