🚨 突然の「Module not found」…それ、ちゃんと設定できてますか？

Next.jsで開発中、ファイルをインポートしようとしたら突如現れるこのエラー。

Module not found: Can't resolve '@/lib/profile'

エンジニアなら一度は見たことがあるこのエラーメッセージ。
「なんでだよ！ファイルはあるじゃん！」と、心の中で叫んだ経験がある方も多いはず。

この記事では、このエラーの本当の原因と、初心者でも5分でできる解決方法を丁寧に解説します。

📌 対象読者：

Next.jsやReactを学習中の方

エイリアスの設定に慣れていない方

「なんかよくわからないけどエラー出た」状態の方

🔍 エラーメッセージの正体を読み解く

まずはエラーメッセージをもう一度見てみましょう。

Module not found: Can't resolve '@/lib/profile'

これは端的に言うと、こういうことです：

「@/lib/profile ってパスにファイルがあると思ったけど、見つからないよ！」

ファイルがないか、パスの書き方がおかしいか、
あるいは**「@」の意味をNext.jsが理解できていない**可能性があります。

👀 ファイル名のスペルミスは、思った以上に多い原因です。

@/lib/profile のように「@」を使ってパスを短く書くには、
設定ファイルにエイリアスの定義 が必要です。

これがないと、Next.jsは「@ってどこ？」と困ってしまいます。

設定を変更しても、VSCodeや開発サーバーが変更を反映していないことがあります。
設定後は以下を実行しましょう：

TypeScriptの場合は、プロジェクトルートの tsconfig.json に以下の設定を追加します。

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

⚠️ baseUrl を "." にすることで、@ が src を指すようになります。

JavaScriptの場合は jsconfig.json で同じように設定すればOKです。

チェックポイント	OK？
`src/lib/profile.ts` が存在している	✅
ファイル名が完全一致（大文字小文字含む）	✅
`tsconfig.json` に `"paths"` が正しく記述されている	✅
開発サーバーを再起動した	✅

ここまでできていれば、エラーは消えているはずです！

エイリアスを使うと、こういったパスが…

import { something } from "../../../../lib/profile";

こんなふうにスッキリ書けます👇

import { something } from "@/lib/profile";

プロジェクトが大きくなるほど、この差は効いてきます。
可読性も保守性も爆上がりです！

エラーは「成長のチャンス」。
たしかに最初は戸惑いますが、「なぜ起こったか」を知れば必ず強くなれます。

この記事が、あなたの「なんかよくわからんエラー地獄」からの脱出に役立てば嬉しいです。
いいね・シェア・コメント大歓迎です！それでは、良い開発ライフを🏄‍♂️✨

🧑‍💻 React / Next.js まわりのTipsやトラブル解決記事を発信中！