Next.js + Typescript: mejora la manera en que importas componentes y módulos locales

#nextjs #typescript #tips #react

Un sinónimo de buena estructuración en un proyecto con Reactjs o Next.js a menudo es dividir los componentes y módulos en entidades más pequeñas para su efectiva reutilización y organización, haciendo así que sean más fáciles de mantener y escalar.

Esto trae un consecuencia que, en lo personal, pienso que hace el código menos legible, confuso y suele ser frustrante: importar módulos o componentes organizados en otros directorios.

Es muy probable que tengas en al menos un componente o módulo de TypeScript algo como esto:

import MyComponent from '../../../../../components/myComponent'
import { helperOne, helperTwo } from '../../../../../helpers'

En primera instancia, quizá no lo veas tan mal, pero honestamente, ¿podría deducirse de manera rápida dónde están ubicados estos módulos importados? y más allá: cuando debes importar un modulo ¿debes ir saltando entre directorios hasta llegar al que necesitas?

Propongo algo mejor: absolute imports de TypeScript.

Con esto, podemos pasar del ejemplo anterior al esto:

import MyComponent from '@components/myComponent'
import { helperOne, helperTwo } from '@helpers'

Lo cual mejora un montón la experiencia de desarrollo.

Comenzando

Lo primero es inicializar y/o configurar el proyecto con Next.js y TypeScript. Para ello se creará un proyecto nuevo (en caso de no tenerlo ya) ejecutando los siguientes comandos y siguiendo los pasos:


# Con YARN
yarn create next-app

# Con NPM
npm init next-app

Esto configurará todo lo necesario para el proyecto, sin embargo, para agregar el soporte para TypeScript, se necesitan unos pasos adicionales, tal y como lo mencionan en su documentación oficial.

Lo primero es ingresar al directorio raíz del proyecto y crear el archivo tsconfig.json vacío:

touch tsconfig.json

Una vez creado este archivo, deben instalarse algunas dependencias adicionales necesarias:

# Con Yarn
yarn add --dev typescript @types/react @types/node

# Con NPM
npm i --dev typescript @types/react @types/node

Se cambian las extensiones de archivo .js a .tsx/.ts y finalmente se ejecuta el comando npm run dev.

Esto agregará la configuración necesaria al archivo tsconfig.json y todo lo demás (como el archivo next-env.d.ts) de manera automática.

Configuración de TypeScript

Ahora bien, para comenzar con nuestra configuración, necesitamos agregar la siguiente configuración al archivo tsconfig.json:

// archivo tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".", // Aquí
    "paths": { // Aquí
      "@helpers/*": ["helpers/*"],
      "@components/*": ["components/*"],
      ... 
    },
    ...
  },
  ...
}

La explicación de configuración les bastante simple e intuitiva:

baseUrl: Directorio base para resolver nombres de módulos no relativos.
paths: Lista de entradas de asignación de ruta para nombres de módulos a ubicaciones relativas a la baseUrl

Luego de hacer esto editores de texto como VS-Code automáticamente reconocerían los alias configurados bajo la key compilerOptions.paths en el archivo tsconfig.json

Sin embargo, si intentamos compilar el código, arrojará el siguiente error:

[ error ] ./pages/api/index.ts
Module not found: Can't resolve '@helpers/router' ...

Esto debido a que WebPack no reconoce estas rutas al momento de compilar y empaquetar el código, así que es el siguiente paso.

Configuración de WebPack

Para acceder a la configuración de WebPack en NextJs, debe hacerse desde el archivo de configuración de Next.js next.config.js, para este caso especifico, hay una vía fácil: instalar el plugin tsconfig-paths-webpack-plugin:

# Con Yarn
yarn add --dev tsconfig-paths-webpack-plugin

# Con NPM
npm install --save-dev tsconfig-paths-webpack-plugin

Y para configurarlo:

// archivo next.config.js
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: config => {
    if (!config.resolve.plugins) {
      config.resolve.plugins = [];
    }

    config.resolve.plugins.push(new TsconfigPathsPlugin());

    return config;
  },
  ...
};