Creación de Proyectos Next.js con TypeScript y App Router

¿Cómo crear un proyecto en Next.js utilizando TypeScript?

Iniciar un proyecto en Next.js es sencillo y eficiente gracias al comando create-next-app. Esta herramienta no solo establece la estructura necesaria del proyecto, sino que también permite integrar TypeScript, una opción que se recomienda encarecidamente. Para comenzar, es fundamental tener Node.js instalado, ya que el comando requiere de nbx.

Al crear un proyecto, puedes incluir opciones que mejoren la organización y el desarrollo, como:

• Integrar Slint para verificar la calidad del código.
• Excluir Tailwind si no es necesario.
• Incluir el directorio source para una mejor organización del código.
• Utilizar el app-router, la nueva metodología de Next.js para manejar el enrutamiento, lo cual exploraremos a más detalle en otras ocasiones.

Configuración del proyecto en Next.js

Durante la configuración inicial, tienes la opción de personalizar un alias de importación que facilite la gestión de los módulos en tu proyecto. Una vez configurado, Next.js requiere pocas dependencias, tanto para desarrollo como para producción:

• Producción: react, react-dom, next.
• Desarrollo: typescript, eslint.

Con el proyecto creado, es conveniente explorarlo con una herramienta como Visual Studio Code para familiarizarse con la estructura general.

¿Cuál es la arquitectura del proyecto en Next.js?

La arquitectura de Next.js organiza de manera eficiente los diferentes archivos y carpetas que conforman un proyecto:

El archivo package.json y scripts clave

Dentro del archivo package.json, se encuentran los scripts que ejecutan las tareas principales:

• next dev: Inicia el servidor de desarrollo para ver los cambios en tiempo real.
• next build: Compila el proyecto para producción.
• next start: Inicia el proyecto en modo producción.
• next lint: Verifica que el código cumple con los estándares de calidad definidos.

El enrutamiento con el app-router

En la carpeta source se ubica el app-router, que contiene archivos vitales para la configuración del proyecto:

• Favicon: Se coloca en el raíz de la carpeta app.
• Globals.css: Donde se definen estilos y variables CSS globales.
• Layout.tsx: Actúa como un envoltorio para toda la aplicación y se conoce como root layout.
• Page.module.css: Utiliza módulos CSS para aplicar estilos organizados.
• Page.tsx: Define la página principal visible en el navegador.

Recursos adicionales: configuración y caché

Además de la organización principal, hay otros aspectos importantes a considerar:

La carpeta pública y configuración con next.config.js

Dentro de la carpeta public se almacenan todos los recursos que deben ser públicamente accesibles, como imágenes y fuentes. El archivo next.config.js es crucial para configuraciones avanzadas, incluyendo compiladores de SAS y configuraciones complejas de Webpack.

La importancia del tsconfig.json y la carpeta .next

El archivo tsconfig.json maneja configuraciones específicas de TypeScript y define los paths para alias dinámicos. Finalmente, la carpeta .next, generada durante el build del proyecto, almacena los archivos cacheados. En caso de problemas como caches persistentes de estilos o componentes, es recomendable eliminar esta carpeta para solucionar errores comunes.

Next.js automatiza muchas decisiones arquitectónicas, permitiendo a los desarrolladores centrarse en crear aplicaciones funcionales y robustas. ¿Listo para comenzar con tu próximo proyecto en Next.js? Dedica tiempo a explorar y comprender plenamente cada uno de estos componentes para maximizar la eficiencia y la calidad de tu desarrollo. ¡Adelante y sigue aprendiendo y explorando nuevas tecnologías en el emocionante mundo de la programación web!