Перейти к содержанию

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

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

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

Пример:

1
2
3
4
5
6
// `tsconfig.json` или `jsconfig.json`
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// components/button.js
export const Button = () => <button>Click Me</button>;

// pages/index.js
import { Button } from 'components/button';

export default function Index() {
  return (
    <>
      <h1>Привет, народ!</h1>
      <Button />
    </>
  );
}

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

1
2
3
4
5
6
7
8
9
// `tsconfig.json` или `jsconfig.json`
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["components/*"]
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// components/button.js
export const Button = () => <button>Click Me</button>;

// pages/index.js
import { Button } from '@/button';

export default function Index() {
  return (
    <>
      <h1>Привет, народ!</h1>
      <Button />
    </>
  );
}

Комментарии