Next.js + TypeScript: imports absolutos

Un sinónimo de buena estructuración en un proyecto con React.js 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 una 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 módulo, ¿debes ir saltando entre directorios hasta llegar al que necesitas?

Propongo algo mejor: absolute imports de TypeScript.

Con esto, podemos pasar del ejemplo anterior a 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 soporte para TypeScript, se necesitan unos pasos adicionales, tal y como lo mencionan en la 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 o .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:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@helpers/*": ["helpers/*"],
      "@components/*": ["components/*"]
    }
  }
}

La explicación de esta configuración es 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 baseUrl.

Luego de hacer esto, editores de texto como VS Code reconocerán automáticamente los alias configurados bajo la llave compilerOptions.paths en el archivo tsconfig.json.

Sin embargo, si intentamos compilar el código, arrojará un error similar a este:

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

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

Configuración de Webpack

Para acceder a la configuración de Webpack en Next.js, debe hacerse desde el archivo de configuración de Next.js next.config.js. Para este caso específico, 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:

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;
  },
};

Con esto ya debería funcionar todo like a charm.

Espero que les sirva y mejoren sus imports y sean coders más felices. Cualquier duda, opinión o crítica es bienvenida.

Easy code, easy life ~