Importaciones absolutas y alias de rutas de módulos

Ejemplos

Importaciones absolutas y alias

Next.js tiene soporte integrado para las opciones "paths" y "baseUrl" de los archivos tsconfig.json y jsconfig.json.

Estas opciones te permiten asignar alias a directorios del proyecto con rutas absolutas, facilitando la importación de módulos. Por ejemplo:

// antes
import { Button } from '../../../components/button'

// después
import { Button } from '@/components/button'

Es bueno saberlo: create-next-app te preguntará si deseas configurar estas opciones automáticamente.

Importaciones absolutas

La opción de configuración baseUrl te permite importar directamente desde la raíz del proyecto.

Un ejemplo de esta configuración:

tsconfig.json o jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

export default function Button() {
  return <button>Click me</button>
}

export default function Button() {
  return <button>Click me</button>
}

import Button from 'components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

import Button from 'components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

Alias de módulos

Además de configurar la ruta baseUrl, puedes usar la opción "paths" para crear "alias" de rutas de módulos.

Por ejemplo, la siguiente configuración mapea @/components/* a components/*:

tsconfig.json o jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

export default function Button() {
  return <button>Click me</button>
}

export default function Button() {
  return <button>Click me</button>
}

import Button from '@/components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

import Button from '@/components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

Cada una de las "paths" es relativa a la ubicación de baseUrl. Por ejemplo:

// tsconfig.json o jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

// pages/index.js
import Button from '@/components/button'
import '@/styles/styles.css'
import Helper from 'utils/helper'

export default function HomePage() {
  return (
    <Helper>
      <h1>Hello World</h1>
      <Button />
    </Helper>
  )
}

Importaciones absolutas y alias de rutas de módulos

Importaciones absolutas

Alias de módulos

On this page