Configuración inicial de proyecto de Next.js con TypeScript, SASS, Linting y Tests - parte 1

En el mundo de la programación con React un framework que viene a destacar y ayudarnos a tener una estructura ya definida en nuestro proyecto, además de otros muchos beneficios, es **Next.js**.

Next.js viene con un conjunto de configuraciones y una estructura lista para utilizar que nos permiten enfocarnos más en la solución que queremos lograr y no perder tiempo en como correr nuestro proyecto.

Primeros pasos (estructura de carpetas, TypeScript y ESLint)

Lo primero que tenemos que hacer es crear nuestro proyecto de Next.js con la estructura inicial para que pueda correr. Para eso tenemos 2 vías, de forma manual o automática.

La forma automática, que es la que vamos a explicar a continuación, configura todo por nosotros.

Al momento de escribir este artículo la versión de Next.js que se instalará es la versión 13.2.x.

Para esto tenemos que abrir una consola y ubicarnos donde queremos crear la carpeta del nuevo proyecto con Next.js y correr:

npx create-next-app@latest <nombre de la carpeta del proyecto> --ts --eslint  --src-dir

ejemplo:
npx create-next-app@latest blog-test --ts --eslint  --src-dir

“**create-next-app” (no confundir con “create-react-app”) es mantenido por el equipo de Next.js y permite crear un nuevo proyecto en segundos con todo configurado. Además, podemos decidir si crear el proyecto de forma interactiva y que el cli **nos vaya preguntando como queremos configurar nuestro proyecto o pasarle directo los argumentos de cómo queremos configurarlo para que sea más rápido. Para más información sobre que opciones tenemos disponible revisar:

[embed]Create Next App | Next.js Create Next.js apps in one command with create-next-app.nextjs.org

En este caso le estamos diciendo que cree un proyecto de Next.js creando una nueva carpeta “blog-test” y que habilite por defecto TypeScript, ESLint y como carpeta principal “/src”.

Creando proyecto de Nextjs de forma automática

También podemos utilizar solo:

npx create-next-app@latest

Y nos preguntará de forma interactiva que queremos habilitar y que no.

Esto nos creará la siguiente estructura de carpeta y solo tenemos que instalar las dependencias de npm y correr el proyecto por primera vez.

Estructura de carpetas en proyecto de Nextjs

npm i
npm run dev

Como habíamos mencionado ya que especificamos que vamos a utilizar “TypeScript” en el proyecto todos los archivos para trabajar con React son creados por defecto utilizado la extension “.tsx” y bajo “JSX” y sus ventajas.

TypeScript con React

Code Linting

Con respecto a “code linting” ya que especificamos que queríamos habilitar **ESLint en nuestro proyecto, “[create-next-app](https://nextjs.org/docs/api-reference/create-next-app)**” hace un excelente trabajo y configura todo lo necesario para realizar el linting de nuestro código. Para verificar su funcionamiento solo tenemos que correr:

npm run lint

Corriendo linting con ESLint en proyecto Nextjs

Tener en cuenta que esto también implica que cuando vayamos a compilar nuestro proyecto para desplegar (“npm run build”), va a correr el linting y en caso de que falle por error no continuará en caso de warning mostrará los warning pero continuará. De ahí la importancia de a partir de ahora correr siempre el linting y mantener nuestro proyecto sin errores después de cualquier cambio.

Por defecto en nuestro proyecto vamos a ver creado el archivo “.eslintrc.json” y dentro tendrá la configuración recomendada para el trabajo con ESLint por primera vez junto con la habilitación de “**Web Vitals**”

{
  "extends": "next/core-web-vitals"
}

Podemos revisar más sobre cómo utilizar “Web Vitals” y sus ventajas en un proyecto con Nextjs en un próximo artículo.

o si solo queremos utilizar la configuración de ESLint por el momento sin “**Web Vitals**” podemos modificar el archivo con:

{
  "extends": "next"
}

Revisaremos con mayor detalle que otras opciones podemos habilitar para el trabajo con “ESLint” en otro artículo.

Mejorando el trabajo con estilos (Sass)

Por defecto Nextjs tiene soporte para:

1. Importar estilos globales que se aplicarán a nuestra página o proyecto entero.
2. Importar estilos desde dependencias en “node_modules”.
3. Soporte para “CSS Modules” utilizando los archivos con la convención “[name].module.css”. Esto nos permite utilizar el mismo nombre de clase en diferentes archivos CSS y tener CSS específico para determinado nivel de un componente.

Ahora para llevar nuestro estilo al siguiente nivel y poder ocupar las ventajas en el uso de un pre-procesador de estilos como SASS necesitamos habilitar el soporte en nuestro proyecto.

Para esto solo tenemos que instalar la dependencia de node:

npm install --save-dev sass

Después tenemos que renombrar la extensión de todos los archivos de estilos existentes y ocupar “.module.scss” o “.module.sass”. Esto debido a que con SASS podemos utilizar SCSS o Indented Syntax (“Sass”).

Conclusiones

Hasta el momento vimos como tener nuestro proyecto con Nextjs listo para empezar a desarrollar con las mejoras prácticas y configuraciones. En el próximo artículo veremos como configurar para poder testear todo lo que vayamos desarrollando con pruebas y mantener un buen nivel de cobertura de código.

Parte 2:

[embed]Configuración inicial de proyecto de Next.js con TypeScript, SASS, Linting y Tests — parte 2 En el artículo anterior de como configurar nuestro primer proyecto NextJS estuvimos viendo una serie de herramientas…medium.com

Bibliografía

1. https://nextjs.org/docs/api-reference/create-next-app
2. https://nextjs.org/docs/getting-started
3. https://nextjs.org/learn/excel/typescript
4. https://nextjs.org/learn/seo/web-performance
5. https://web.dev/vitals/
6. https://nextjs.org/docs/basic-features/eslint
7. https://nextjs.org/docs/basic-features/built-in-css-support#sass-support