Next.jsでよく使う実行環境と処理の違いを整理してみた

Share this post

🚪はじめに

こんにちは、管理人のTKGです。

Next.jsで開発をしていると、「この処理ってサーバー側？クライアント側？」と悩むことはありませんか？この記事では、Next.jsにおける代表的な「実行環境（ランタイム）」を整理し、それぞれの環境でよく使われる処理の違いや特徴をわかりやすくまとめました。

🎯想定読者

Next.jsの開発初心者〜中級者
実行環境の違いを意識した設計がしたい方
SSR・CSRの違いやServer Actionsの用途に混乱している方

📘本記事でわかること

Next.jsの主要な実行環境の種類
各環境でよく使われる処理やコード例
実行環境を意識することの重要性

🧠 なぜ「実行環境の理解」が重要なのか？

Next.jsはサーバーサイドとクライアントサイドの処理が混在するハイブリッドなフレームワークです。そのため、「どこで実行されるか？」を意識しないと、想定外の挙動やエラーにつながることがあります。

例えば以下の場合を考えてみましょう。

console.log(typeof window);

上記コードはサーバー上で実行する場合 "undefined"となってしまいます。

理由はwindowはブラウザ側でしか実行できない処理のため。

このように実行環境の違いを把握しておけば、「windowが使えないのはなぜ？」「fetchが失敗するのはなぜ？」といったトラブルを防ぎやすくなります。

🗂️ Next.jsでよく使う実行環境一覧

実行環境	概要	主な用途/処理例
ブラウザ（クライアント）	ユーザーの端末上で動作	DOM操作 / useEffect / イベント処理など
Node.js（サーバー）	サーバー上で動作	API Routes / getServerSideProps / Server Actions
Edge Runtime	Vercel等で利用できる軽量な実行環境	Middleware / Edge Functionsなど
Static（ビルド時）	ビルド時点で静的に生成されるHTML	getStaticProps / ISR（Incremental Static Regen）

🔍 各環境の処理例と特徴

✅ クライアント（ブラウザ）

useEffect, useState などのReactフック
イベント処理（クリック、スクロールなど）
window, document の利用が可能

useEffect(() => {
console.log('クライアントでのみ実行される');
}, []);

✅ サーバー（Node.js）

API Routes (pages/api/xxx.ts)
getServerSideProps / Server Actions
環境変数、データベース処理などのセキュアな処理

export async function GET() {
  const data = await fetch("https://api.example.com/data");
  return Response.json(data);
}

✅ Edge Runtime（middleware）

ページ遷移前の処理（認証、リダイレクトなど）
クライアントではなくサーバー寄りの軽量環境（Node.jsの一部機能非対応）

export function middleware(request: NextRequest) {
  const token = request.cookies.get("token");
  if (!token) return NextResponse.redirect(new URL("/login", request.url));
}

✅ Static（ビルド時実行）

getStaticProps による静的ページ生成
ISR（ビルド後に静的HTMLを再生成）も対応

export const getStaticProps = async () => {
  const posts = await fetchPosts();
  return { props: { posts }, revalidate: 60 };
};

🧭 実行環境の判断ポイント

処理/関数	実行環境
`useEffect`, `window`, `document`	クライアントのみ
`getServerSideProps`, `API Routes`	サーバー（Node.js）
`middleware.ts`	Edge Runtime
`getStaticProps`, `ISR`	ビルド時（Static）

✏️ まとめ：実行環境を意識すれば、コードの理解も深まる

ポートフォリオサイトにthree.jsを導入するにあたり、基本的な導入手順は以下のような流れになります。

Next.jsでは**「その処理はどこで実行されているか？」**を意識することが非常に大切です。

環境によってできること・できないことが変わるため、実行場所を理解していないとエラーやセキュリティリスクにもつながります。

📎 関連リンク（参考）

🏁おわりに

Next.jsの実行環境の違いは、普段なんとなく使っていても明確に意識する機会が少ないものです。

しかし、こうした基礎的な概念を押さえることで、コードの理解やトラブルシューティングの精度も大きく変わってきます。

今後もこの記事のように、「なんとなく使っているけれど実は重要な概念」について整理し、理解の助けとなる記事を発信していく予定です。

ぜひまた覗いてみてください！

Share this post