Next.js + TypeScript で path alias を使う

プロジェクトルートに alias を設定

next.config.js

const path = require('path')

module.exports = {
  webpack(config) {
    config.resolve.alias['@'] = path.join(__dirname)
    return config
  },
}

tsconfig.json

{
  "compilerOptions": {
    ...

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

    ...
  },
  ...
}

使う

index.tsx

import Layout from '@/components/Layout'