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

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

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

// before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'

Важно знать: create-next-app предложит настроить эти опции за вас.

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

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

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

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

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

import Button from 'components/button'
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

Псевдонимы модулей

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

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

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

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

import Button from '@/components/button'
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

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

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