¿Listo para utilizar TypeScript en tu proyecto Next.js y no sabes por dónde comenzar?

El truco

En lugar de complicarte, simplemente ejecuta:

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

A continuación, verás cómo se configura automáticamente tu proyecto con soporte para TypeScript. A diferencia de configurar manualmente cada fichero, este comando prepara todo por ti, incluyendo un tsconfig.json predeterminado.

Aquí tienes un ejemplo de cómo NO deberías hacerlo (configuración manual):

npx create-next-app my-nextjs-app
cd my-nextjs-app
npm install --save-dev typescript @types/react @types/node
touch tsconfig.json

En tsconfig.json, tendrías que añadir configuraciones básicas manualmente, como:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Con el comando inicial, ya tienes todo listo: Next.js genera automáticamente ese tsconfig.json por ti y configura todos los tipos necesarios.

Opta siempre por la simplicidad y eficiencia que te ofrece el soporte nativo de TypeScript en Next.js. Ahorrarás tiempo y evitarás configuraciones manuales innecesarias.