Embellecer importaciones absolutas con alias en nextjs
Jorge Luis Calleja Alvarado
Posted on March 8, 2022
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": "."
}
}
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).
links:
Posted on March 8, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.