๐ง๐๐ฝ๐ฒ๐ฆ๐ฐ๐ฟ๐ถ๐ฝ๐ ๐๐ฒ๐๐ ๐ฃ๐ฟ๐ฎ๐ฐ๐๐ถ๐ฐ๐ฒ๐ ๐ณ๐ผ๐ฟ ๐ก๐ฒ๐ ๐.๐ท๐ ๐ถ๐ป ๐ฎ๐ฌ๐ฎ๐ฒ
Many Next.js projects claim to use TypeScript but do not follow it. They use strict mode in the config but rely on type assertions and implicit any. This leads to crashes at runtime.
True TypeScript requires the right configuration and patterns.
Update your tsconfig.json with these settings:
โข noUncheckedIndexedAccess: This makes arr[0] return T | undefined. It stops crashes when arrays are empty. โข noImplicitOverride: This forces you to use the override keyword in subclasses. โข exactOptionalPropertyTypes: This ensures { x?: string } stays distinct from { x: string | undefined }. โข forceConsistentCasingInFileNames: This prevents import bugs on Linux systems. โข noPropertyAccessFromIndexSignature: This forces you to use bracket notation for indexed types.
Stop using type assertions like "value as Type". This tells the compiler to stop checking your code. Instead, use type guards or Zod.
Follow these patterns to keep your code safe:
Server Actions Do not use "formData.get() as string". Parse and validate your FormData with Zod at the top of every action. This turns unknown input into typed data.
API Fetches The response.json() method returns any. Use a typed wrapper with Zod to parse the response. This ensures the data matches your expected shape.
Environment Variables Do not use "process.env.KEY as string". Create a utility to validate your variables at startup. If a key is missing, your app should throw an error immediately.
Component Props Avoid using many optional props that depend on each other. Use discriminated unions instead. This makes invalid states impossible to represent in your code.
Summary of changes:
- Instead of response.json() returning any: Use a typed fetch wrapper with Zod.
- Instead of formData.get() as string: Use Zod in Server Actions.
- Instead of arr[0] being T: Enable noUncheckedIndexedAccess.
- Instead of "value as SomeType": Use type guards or Zod.parse().
- Instead of optional props: Use discriminated unions.
- Instead of process.env.KEY as string: Use a requireEnv() utility.
Source: https://dev.to/thekitbase/typescript-best-practices-for-nextjs-projects-in-2026-40pi