Crear un proyecto base con Next.js, TypeScript y Tailwind CSS es el primer paso para construir aplicaciones React modernas y bien tipadas. Aquí verás cómo inicializar el entorno, ajustar reglas de strict typing en TypeScript, limpiar los archivos por defecto y dejar listo Tailwind para empezar a maquetar.

Cómo inicializar un proyecto Next.js con TypeScript

El punto de partida es un comando único que descarga las dependencias y arma la estructura base. No necesitas dominar Next.js para seguir este flujo, porque el foco está en aprovechar la configuración lista de React y TypeScript.

Desde la terminal, dentro de la carpeta donde quieras alojar el proyecto, ejecuta:

bash npx create-next-app@latest platzi-react-typescript --ts --use-npm

Ese comando le dice a npm execute (la X de npx) que cree una aplicación con las últimas dependencias de Next.js, active TypeScript con la bandera --ts y use npm como gestor de paquetes [01:00]. Si prefieres yarn o pnpm, también funcionan sin afectar el resultado.

¿Qué hace npx en este comando? Ejecuta paquetes de npm sin instalarlos globalmente. Aquí corre create-next-app una sola vez para generar el proyecto.

Una vez termine la instalación, entra a la carpeta y levanta el servidor de desarrollo:

bash npm run dev

Verás la página de bienvenida en localhost:3000, señal de que React y TypeScript ya están compilando.

Por qué activar strict mode en TypeScript

Antes de escribir código, conviene endurecer las reglas para que el compilador detecte errores temprano. Abre el archivo tsconfig.json y verifica que strict esté en true [03:30].

Después agrega dos reglas adicionales que refuerzan la calidad del tipado:

• noImplicitAny en true: obliga a declarar tipos explícitos y evita que TypeScript infiera any por defecto.
• noImplicitReturns en true: exige que todas las rutas de una función retornen un valor cuando corresponda.

Con estas tres banderas activas, TypeScript se vuelve un aliado real: te avisa cuando olvidas tipar un parámetro o cuando una función tiene una rama sin return.

¿Qué es noImplicitAny? Es una regla de TypeScript que prohíbe que una variable o parámetro quede sin tipo definido. Si no especificas el tipo, el compilador lanza error.

Cómo ajustar ESLint y limpiar el proyecto

Next.js trae reglas de ESLint preconfiguradas. Para este proyecto académico, se desactivan dos reglas puntuales: la del componente Image de Next.js y algunas validaciones estrictas de accesibilidad [04:30]. En producción no deberías hacer esto, pero en un entorno de aprendizaje permite avanzar sin fricción.

Luego viene la limpieza. La idea es partir de una hoja en blanco:

1. En pages/index.tsx, borra todo el contenido dentro de main y del footer.
2. Elimina las clases CSS importadas y el archivo home.module.css.
3. Borra la carpeta pages/api, ya que no usarás las funciones de API que ofrece Next.js.
4. Vacía el archivo globals.css para reemplazarlo después con las directivas de Tailwind.

Para comprobar que todo sigue vivo, deja un H1 simple con el texto Hello Platzi y revisa el navegador.

Cómo instalar y configurar Tailwind CSS en Next.js

Tailwind se integra siguiendo la guía oficial para Next.js. El proceso son tres pasos cortos.

Primero instala las dependencias en la terminal:

bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Esto genera los archivos tailwind.config.js y postcss.config.js. Reemplaza el contenido de tailwind.config.js con la configuración recomendada por Tailwind, donde se definen las rutas de los archivos que usarán las clases utilitarias.

Después, en globals.css, importa las tres directivas que activan el motor de Tailwind:

css @tailwind base; @tailwind components; @tailwind utilities;

Detén el servidor con Ctrl + C y vuelve a correr npm run dev. Aplica un H1 con clases utilitarias de Tailwind para confirmar que los estilos se están inyectando correctamente.

¿Por qué hay que reiniciar el servidor de desarrollo? Porque Next.js necesita volver a leer la configuración de PostCSS y Tailwind al arrancar. Sin reinicio, los estilos no se aplican.

Qué herramientas quedaron listas en tu entorno

Con estos pasos tu proyecto ya tiene una base sólida para escribir componentes con tipado estricto y estilos rápidos:

• Next.js como framework de React con servidor de desarrollo en localhost:3000.
• TypeScript con strict, noImplicitAny y noImplicitReturns en true.
• ESLint con reglas ajustadas al alcance del proyecto.
• Tailwind CSS integrado vía PostCSS y directivas en globals.css.

Un detalle importante: lleva un buen historial de commits en Git. Escribir mensajes claros en cada cambio te permite reconstruir el paso a paso de la configuración y revisar qué tocaste cuando algo se rompa.

¿Ya dejaste tu proyecto corriendo con el H1 estilizado? Cuéntame en los comentarios qué gestor de paquetes elegiste y si activaste alguna regla extra de TypeScript.