【Next.js】特定のディレクトリを基準にし、絶対パスでモジュールをインポートする方法

はじめに

// src/pages/index.tsx
import { Button } from '../components/Button';

// src/pages/index.tsx
import { Button } from 'components/Button';

バージョン

• Next.js：10.2
• TypeScript：4.2.4

設定方法

// jsconfig.json / tsconfig.json
{
  "compilerOptions": {
    // 追加
    "baseUrl": "src"
  }
}

エイリアスの設定

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

// src/pages/index.tsx
import { Button } from '@/components/Button';

最後に

参考文献

• Advanced Features: 絶対パスインポートとモジュールパスエイリアス | Next.js