TypeScript with Next.js: Achieving Full Type Safety

TypeScript and Next.js are a powerful combination. Learn how to maximize type safety in your applications.

Setting Up TypeScript

Next.js has built-in TypeScript support:

npx create-next-app@latest my-app --typescript

Essential Type Patterns

API Response Types

interface ApiResponse<T> {
  data: T;
  success: boolean;
  error?: string;
  timestamp: number;
}

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

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

Form Types with Zod

import { z } from 'zod';

const SignupSchema = z.object({
  name: z.string().min(2, 'Name too short'),
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Password must be 8+ chars'),
  confirmPassword: z.string(),
}).refine(data => data.password === data.confirmPassword, {
  message: "Passwords don't match",
  path: ['confirmPassword'],
});

type SignupForm = z.infer<typeof SignupSchema>;

Strict Mode Benefits

Enable strict mode in tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  }
}

Conclusion

TypeScript catches bugs at compile time, reducing runtime errors. Invest in proper typing - your future self will thank you.