隆Estamos en directo en Twitch!

隆Entra y participa!

Imagen de la etiqueta nextjs

C贸mo usar rutas absolutas en los imports en Next.js

2 minutos de lectura驴Una errata? Edita el art铆culo

Normalmente cuando trabajamos con aplicaciones de React, tenemos multitud de componentes en diferentes carpetas y tenemos que usar rutas relativas para poder importarlos all铆 donde lo necesitamos.

Por ejemplo con esta estructura de aplicaci贸n:

next-js-react-app/
鈹溾攢 pages/
鈹  鈹溾攢 index.js
鈹  鈹溾攢 search/
鈹  鈹  鈹溾攢 index.js
鈹溾攢 components/
鈹  鈹溾攢 Button/
鈹  鈹  鈹溾攢 index.js
鈹  鈹  鈹溾攢 index.css

Imaginemos que desde el archivo pages/search/index.js queremos importar el componente Button. Tendr铆amos que hacer el import de la siguiente manera:

import Button from '../../components/Button'

Esto, que es un ejemplo sencillo, si tuvieramos que repetir constamente nos encontrar铆amos que es dif铆cil de estar pendiente constantemente de seguir las rutas relativas para cada componente o archivo que queramos importar.

Para mejorar esto podemos usar los imports con rutas absolutas de esta forma:

import Button from 'components/Button'

Si lo probamos, veremos que no funciona… 隆pero podemos hacer que lo haga!

Para ello s贸lo tenemos que a帽adir un archivo llamado jsconfig.json en la ra铆z de tu proyecto y a帽adimos el siguiente contenido:

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

De esta forma, ahora podremos importar ficheros usando rutas absolutas desde la ra铆z, de forma que las rutas que usaremos ser谩n m谩s predecibles y f谩ciles de completar.

Adem谩s este archivo de configuraci贸n tambi茅n habilitar谩 a que editores como Visual Studio Code entiendan este tipo de rutas.

Comparte el art铆culo