「Module not found」でハマったあなたへ。Next.jsでエイリアスが効かない原因と解決法
🚨 突然の「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が理解できていない**可能性があります。
💡 よくある原因3選（ここでだいたい解決します）
✅ 原因1：ファイルが存在しない／パスが間違ってる
-
src/lib/profile.tsは本当にありますか？ - ファイル名が
Profile.tsxになっていませんか？（大文字・小文字に注意！） - 拡張子が
.jsや.ts、.tsxで間違っていないか確認しましょう。
👀 ファイル名のスペルミスは、思った以上に多い原因です。
✅ 原因2：「@」エイリアスが未設定
@/lib/profile のように「@」を使ってパスを短く書くには、
設定ファイルにエイリアスの定義 が必要です。
これがないと、Next.jsは「@ってどこ？」と困ってしまいます。
✅ 原因3：設定はしたけどVSCodeや開発サーバーが古いまま
設定を変更しても、VSCodeや開発サーバーが変更を反映していないことがあります。
設定後は以下を実行しましょう：
- VSCodeを再起動
-
npm run devを一度止めて再起動
🔧 解決方法：エイリアスを正しく設定しよう
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やトラブル解決記事を発信中！
Discussion