DEV Community 👩‍💻👨‍💻

Cover image for Embellecer importaciones absolutas con alias en nextjs
Jorge Luis Calleja Alvarado
Jorge Luis Calleja Alvarado

Posted on • Updated on

Embellecer importaciones absolutas con alias en nextjs

Estas trabajando en un proyecto grande o pequeño y algunas de sus declaraciones de importación se ven algo asi import Component from '../../../Component'.

Desde Next.js v9.4.x y posteriores, hace que la configuración de importaciones absolutas sea muy simple para proyectos de JavaScript y TypeScript.
Todo lo que necesita hacer es agregar la configuración baseUrl a jsconfig.json (proyectos JS) o tsconfig.json (proyectos TS).

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
Enter fullscreen mode Exit fullscreen mode

Esto permitirá importaciones absolutas desde "." (el directorio raíz).

Los editores como VSCode admiten automáticamente la configuración en jsconfig.json, por lo que Command + Click para saltar al origen de un archivo funcionará como de costumbre.
Atom e IntelliJ también tienen soporte para reescrituras.

Embellecer con Alias

Además, Next.js v9.4.x también admite la opción de rutas, que le permite crear alias de módulos personalizados.
Por ejemplo:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Luego puede usar su alias así:

// importacion absoluta 'components/button'
import Button from '@/components/Button';
Enter fullscreen mode Exit fullscreen mode

Conclusión

Entonces las importaciones absolutas en Next.js son muy fáciles de configurar, pueden ser muy útiles para proyectos grandes.
Pero por que no simplemente tener una mejor DX (Experiencia de Desarrollador).

links:

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.