【Next.js】Docker 環境での console.log の見方（サーバー／クライアント編）

Next.js × Docker 環境での console.log の表示場所まとめ

はじめに

Next.js を Docker 上で動かしているときに

• 「console.log がブラウザの検証ツールに出ない！」
• 「コンテナに入ったけどログが見えない！」

と戸惑うことがありました。

本記事では Next.js 開発環境（npm run dev）を Docker Compose で動かした場合に、console.log がどこに出力されるのか を備忘録としてまとめました。

---

1. console.log の出力先は「実行場所」で変わる

Next.js（App Router）では、コードが サーバー側 と クライアント側 のどちらで実行されるかによって、console.log の出力先が異なります。

実行場所	例	出力先
サーバー側	serverAction / getServerSideProps / サーバーコンポーネント	Node.js の標準出力（＝Docker のログ）
クライアント側	"use client" コンポーネント / イベントハンドラ	ブラウザの開発者ツール（Console）

---

2. サーバー側のログを確認する方法（Docker編）

手順1. コンテナ名を調べる

$ docker ps

CONTAINER ID   IMAGE         COMMAND                  CREATED         STATUS         PORTS                    NAMES
abcd1234efgh   nextjs-app    "docker-entrypoint.s…"   5 minutes ago   Up 5 minutes   0.0.0.0:3000->3000/tcp   myapp-nextjs-1

手順2. ログをリアルタイムで追う

docker logs -f myapp-nextjs-1

手順3. 実際に動作させる

'use server';

export async function serverAction() {
  console.log('Get message!');
  console.log('Hello from serverAction!');
}

手順2のログでメッセージが確認できます。

Get message!
Hello from serverAction!

3. クライアント側のログを確認する方法

クライアントコンポーネントに "use client" を付けると、そのコードはブラウザで実行されます。

"use client";

export function ClientButton() {
  return (
    <button onClick={() => console.log("クリックされました！")}>
      Click
    </button>
  );
}

この場合の console.log は ブラウザの開発者ツール → Console タブ に表示されます。

4. まとめ

• サーバー側のconsole.log
  → Docker コンテナのログで確認する。

docker logs -f <コンテナ名>

• クライアント側のconsole.log
  → ブラウザの Console に表示される。

Next.js × Docker 開発では、「ログが出ない！」と思ったらどこで実行されているコードかを意識することが大事になります。