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:

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs