Next.js の import のパスを揃える

frontend

Next.js で import するとき、デフォルトでは、以下のように相対パスになるので .. とか ../.. とか増えちゃって煩雑ですよね。

import { AuthContext } from "../context/auth";

これをどこでも、 src を基準にして

import { AuthContext } from "context/auth";

に書きたいですよね。

tsconfig.json に以下を加えればよいです。

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

上記設定は、src/context のように src フォルダを置いている前提です。
srcフォルダがなく、直接フォルダルートに context等を置いている場合は
src の部分を . にします。

【Next.js】特定のディレクトリを基準にし、絶対パスでモジュールをインポートする方法
https://fwywd.com/tech/next-base-url

Absolute Imports and Module path aliases
https://nextjs.org/docs/advanced-features/module-path-aliases

コメント

タイトルとURLをコピーしました