Абсолютные импорты и псевдонимы путей модулей

Примеры

Абсолютные импорты и алиасы

Next.js имеет встроенную поддержку опций "paths" и "baseUrl" в файлах tsconfig.json и jsconfig.json.

Эти опции позволяют назначать алиасы для директорий проекта на абсолютные пути, что упрощает импорт модулей. Например:

// до
import { Button } from '../../../components/button'

// после
import { Button } from '@/components/button'

Полезно знать: create-next-app предложит настроить эти параметры автоматически.

Абсолютные импорты

Опция конфигурации baseUrl позволяет импортировать модули непосредственно из корня проекта.

Пример такой конфигурации:

tsconfig.json или 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 />
    </>
  )
}

Алиасы модулей

В дополнение к настройке пути baseUrl, вы можете использовать опцию "paths" для создания "алиасов" путей к модулям.

Например, следующая конфигурация сопоставляет @/components/* с components/*:

tsconfig.json или 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 />
    </>
  )
}

Каждый из путей "paths" указывается относительно расположения baseUrl. Например:

// tsconfig.json или 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>
  )
}

Абсолютные импорты и псевдонимы путей модулей

Абсолютные импорты

Алиасы модулей

On this page