DEV Community

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

Posted on • Edited on

3 2

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:

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay