Embellecer importaciones absolutas con alias en nextjs

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": "."
  }
}

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/*"]
    }
  }
}

Luego puede usar su alias así:

// importacion absoluta 'components/button'
import Button from '@/components/Button';

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).