Next.js（App Router）を Claude Code と一緒に触りはじめた未経験者が、最初の数日でほぼ必ず遭遇する英語のエラーメッセージを5つ集めました。

エラーは「失敗」ではありません。プログラムが「ここが噛み合っていないよ」とあなたと AI に教えてくれるヒントです。英語だとつい身構えますが、意味と直し方さえ知っていれば、どれも「あー、またこれね」で済むようになります。実際、下の5つは出て当たり前。むしろ出ないほうが珍しいくらいです。

各エラーを ①実際のエラー全文 → ②いつ出るか → ③何を言っているか（原因）→ ④直し方 → ⑤そのまま AI に貼れる聞き方1行 の型で並べました。図鑑として、詰まったときに該当箇所だけ引けます。

1. Module not found: Can't resolve 'xxx'

①エラー全文

Module not found: Can't resolve 'react-icons'

  1 | import { FaGithub } from 'react-icons/fa'
    |                          ^

②いつ出るか

import を書いた直後、保存した瞬間に画面が赤くなる。

③何を言っているか（原因）

「react-icons っていうモジュール、探したけど見つからないよ」という意味です。原因はだいたい次の2つ。

インストールし忘れ（npm install していない外部ライブラリを import した）
パスのタイプミス（自作ファイルを ./components/Button と書くべきところを ./component/Button にした等）

④直し方

外部ライブラリなら、ターミナルでインストールする。

npm install react-icons

自作ファイルなら、import のパスと実際のファイル名・場所が一致しているか確認する。大文字小文字も区別されます（Button.tsx を button で import すると Mac では通っても本番で落ちることがある）。

⑤そのまま AI に貼れる聞き方1行

「Module not found: Can't resolve 'react-icons'」というエラーが、import { FaGithub } from 'react-icons/fa' の行で出ました。インストール漏れかパスミスか切り分けて直し方を教えてください。

2. ReferenceError: xxx is not defined / undefined is not a function

①エラー全文

ReferenceError: userName is not defined

TypeError: user.getName is not a function

②いつ出るか

書いたはずの変数や関数を使った瞬間。ブラウザのコンソールや画面のオーバーレイに出る。

③何を言っているか（原因）

is not defined = 「その名前の変数、どこにも用意されてないよ」。宣言し忘れ か スペルミス が大半（userName を usreName と書いた等）。
is not a function = 「それ、関数じゃないから () で呼べないよ」。名前は合っていても中身が想定と違う（undefined だった、オブジェクトだった）ときに出ます。

④直し方

まずスペルを疑う。宣言側と使用側で1文字ずつ見比べる。エディタの補完（候補が出るか）でも気づけます。is not a function は、呼ぶ前に console.log(user) で中身を出し、本当にその関数を持っているか確認するのが早いです。

⑤そのまま AI に貼れる聞き方1行

「ReferenceError: userName is not defined」が出ました。userName は◯行目で使っていますが宣言が見当たりません。スペルミスか宣言漏れかを含めて原因と直し方を教えてください。

3. SyntaxError: Unexpected token

①エラー全文

Error: Unexpected token, expected "," (12:4)

  10 |   const user = {
  11 |     name: "Taro"
> 12 |     age: 20
     |     ^

②いつ出るか

保存した瞬間、コンパイルすら通らずビルドが止まる。

③何を言っているか（原因）

「文法が途中でおかしくなっているよ」という意味。9割は 括弧・カンマ・引用符の閉じ忘れ／付け忘れです。上の例なら name: "Taro" の後ろにカンマ , が抜けています。

エラーが指す行（12:4 は12行目4文字目）は「おかしいと気づいた場所」なので、本当の原因はその1〜2行手前にあることがよくあります。ここが初心者のハマりどころ。

④直し方

指摘された行の直前を重点的に見る。VS Code なら対応する括弧をクリックするとペアがハイライトされるので、閉じ忘れを見つけやすいです。Prettier などの自動整形を入れておくと、崩れた瞬間に見た目で気づけます。

const user = {
  name: "Taro",  // ← カンマを追加
  age: 20,
}

⑤そのまま AI に貼れる聞き方1行

「Unexpected token, expected ","（12:4）」が出ました。該当箇所の前後5行を貼るので、閉じ忘れやカンマ抜けがどこか指摘して直してください。

4. Hydration failed / Text content does not match

①エラー全文

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Text content did not match. Server: "12:00:00" Client: "12:00:01"

②いつ出るか

Next.js で、日付・時刻・ランダム値などを画面に出したときや、window・localStorage をコンポーネントの本体で直接触ったとき。

③何を言っているか（原因）

Next.js は サーバー側で一度 HTML を作り、ブラウザ側でもう一度組み立てて突き合わせます（これが hydration）。このとき両者の中身が食い違うと出るエラーです。

new Date() で現在時刻を出す → サーバーとブラウザで数ミリ秒ずれる
Math.random() を表示 → 毎回変わる
サーバーに存在しない window / localStorage を本体で参照

つまり「サーバーとブラウザで結果が変わるもの」を、そのまま描画すると起きます。

④直し方

「ブラウザだけで実行したい処理」は useEffect の中に入れる。useEffect はブラウザ側でしか動かないので、サーバーとの食い違いが起きません。

'use client'
import { useEffect, useState } from 'react'

export function Clock() {
  const [now, setNow] = useState<string | null>(null)
  useEffect(() => {
    setNow(new Date().toLocaleTimeString())
  }, [])
  return <p>{now ?? '読み込み中...'}</p>
}

⑤そのまま AI に貼れる聞き方1行

Next.js で「Hydration failed / Text content did not match」が出ました。◯◯コンポーネントで new Date() を表示しています。サーバーとブラウザの差が原因だと思うので、useEffect を使った直し方を教えてください。

5. Error: Port 3000 is already in use

①エラー全文

⚠ Port 3000 is in use, trying 3001 instead.

Error: listen EADDRINUSE: address already in use :::3000

②いつ出るか

npm run dev でサーバーを起動しようとしたとき。前のサーバーを止めきれていない状態で再起動すると出る。

③何を言っているか（原因）

「3000番の入り口、もう別のサーバーが使ってるよ」という意味です。ターミナルを閉じ忘れた、Ctrl + C で止めたつもりが残っていた、など。コードのバグではありません。ここで慌てないのが大事。

④直し方

一番簡単なのは残っているプロセスを止めること。Mac / Linux なら、

lsof -ti:3000 | xargs kill

3001番で起動してよければそのまま使ってもOK（http://localhost:3001 を開く）。ポートを指定して起動することもできます。

npm run dev -- -p 3001

⑤そのまま AI に貼れる聞き方1行

「Port 3000 is already in use（EADDRINUSE）」で npm run dev が起動できません。前のサーバーが残っているようです。Mac 前提で、残っているプロセスを止めて 3000 番で起動し直す手順を教えてください。

おまけ: localStorage is not defined

Next.js で localStorage is not defined が出るのも定番です。これは4番の hydration と同じ根っこで、サーバー側には localStorage（ブラウザの保存領域）が存在しないのに本体で触ってしまうのが原因。対処も同じく、useEffect の中に移すか 'use client' を付けて読み書きします。「サーバーにブラウザ専用のものを求めない」と覚えておくと、この系統のエラーはまとめて見通せます。

まとめ

5つに共通するのは、エラー文の英語は「何が・どこで・どう噛み合っていないか」を毎回律儀に教えてくれているということです。全部を読めなくても、Module not found（見つからない）／not defined（用意されてない）／Unexpected token（文法崩れ）／Hydration（サーバーとブラウザの食い違い）／Port in use（入り口が埋まってる）と、最初の数語の意味だけ覚えれば当たりがつきます。

そして詰まったら、上の「⑤聞き方1行」のように エラー全文＋何をしていたか を添えて AI に貼る。これだけで返ってくる答えの精度がまるで変わります。エラーは怖い壁ではなく、あなたと AI の共通言語です。

Qiita 読者の方には基礎的な内容だったと思います。もし周りに「独学で Next.js を触りはじめて英語エラーで固まっている」初心者の方がいれば、この記事や下の教材を紹介・社内研修の入り口として使ってもらえたら嬉しいです。

未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を、全20セッションで体系化した教材を運営しています。プログラミングと「AIと協働するスキル」が同時に身につく設計です。

無料体験版（git clone してすぐ動く・最初の数セッション分・⭐ Star もよろしくお願いします）→ https://github.com/ayies128/next-ai-camp-trial
教材完全版＋月5,500円のメンタリング（全20セッション＋チャット質問し放題）→ https://menta.work/plan/20251?ref=qiita
YouTube『AIエンジニア情報局』（AI×開発ニュースを1本5分でキャッチアップできる別運営チャンネル・無料）→ https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/?ref=qiita