React/Next.js JavaScriptを取り巻く世界の進化

いまさらながらだけど、Javascriptという言語を甘くみているエンジニアがおおい。Javascriptはもともとはブラウザ上で動作するスクリプト言語だ。これをサーバサイドでも、というかどこでも動くようにしたのがNode.jsである。Node.jsの恩恵によってWEBにおけるフロントエンド開発の世界がものすごく華やかになったのだ。

これまでJavascriptだけでごりごり書いてきたようなことを、コンポーネント開発できるようにしたのがReactだ。

この思想はよいが、実際現実的に部品化していく意味と時間が問われるのは開発規模と納期（予算）に見合うかどうかになるだろうが、こういったものは使いこなせるようにしておくべきだ。

Reactがよいのは、Javascript内に直接HTMLみたいに記述ができることだ。正確にいうと、そこで使っている言語はJSXというHTMLに非常によくにたものだ。この部分はブラウザでは直接読むことができないので、事前にBabelというツールでコンパイルしておくことが必要だ。

直接的にReact自体で開発しつづけていくのは辛いが、さらにそれをパッケージ化したNext.jsというフレームワークをつかうことで便利になる。Next.jsをつかうとページのレンダリングを制御できる。ここまで到達すると、ようやくこのフロントエンドで、これらを利用する意味と価値がはっきりとする。

🌐 Next.js のレンダリング手法と使い分け

📌 実際のページごとの使い分け例

✅ App Routerでの実装例（SSR/ISR/SSG 切り替え）

✅ 例1：SSG（静的生成）

// app/page.tsx
export default async function Home() {
  const res = await fetch('https://api.example.com/posts', {
    cache: 'force-cache', // ビルド時に生成
  });
  const posts = await res.json();

  return <PostList posts={posts} />;
}

✅ 例2：ISR（5分ごとに再生成）

// app/posts/page.tsx
export default async function Posts() {
  const res = await fetch('https://api.example.com/  posts', {
  next: { revalidate: 300 }, // 5分ごとに再生成
});
  const posts = await res.json();

  return ;
}

例3：SSR（リクエストごとに再取得）

// app/dashboard/page.tsx
export default async function Dashboard() {
  const res = await fetch('https://api.example.com/user/dashboard', {
    cache: 'no-store',
  });
  const data = await res.json();

  return <DashboardView data={data} />;
}

例4：CSR（クライアントでフェッチ）

// app/chat/page.tsx
'use client';

import { useEffect, useState } from 'react';

export default function Chat() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    fetch('/api/chat')
      .then((res) => res.json())
      .then(setMessages);
  }, []);

  return <ChatWindow messages={messages} />;
}

🔚 まとめ

✅ App Router vs Pages Router：どちらを使うべきか、どう違うのか？

Next.js 13 以降、App Router（/app ディレクトリ）とPages Router（/pages ディレクトリ）は別々のルーティングシステムとして提供されています。

🔷 Pages Router（従来のルーティング） /pages

• 従来の Next.js の方式（Next.js v1〜12まで採用）
• 1ページ = 1ファイル という非常にわかりやすい構造
• getStaticProps / getServerSideProps でデータフェッチ
• ルーティングの柔軟性はやや低い
• グローバルな状態管理やレイアウトがやや面倒

✅ 向いているケース

• 単純なWebサイト
• 旧バージョンからの移行
• クイックに始めたい小中規模プロジェクト

🆕 App Router（新しい構造的ルーティング） /app

• Next.js 13+ の新しい推奨方式
• Server Components / Client Components を使い分けられる
• layout.tsx によるネストレイアウト
• loading.tsx / error.tsx などで自動状態UIが使える
• ファイル単位で柔軟な構造設計が可能（React Server Component前提）

✅ 向いているケース

• UIが複雑、状態管理が重要なアプリ
• 本格的なWebアプリケーション
• 最新のNext.jsの恩恵を最大限受けたい場合

これから新規で始めるのであれば、AppRouterしかない。

❌ 同時に共存できない理由

Next.js は以下のように設計されています：

同一のURLパスに対して App Router と Pages Router が同時にマッチすることを許可しない

たとえば / を app/page.tsx と pages/index.tsx の両方で定義していた場合、
Next.js は「どちらを使えばいいのか」決定できず、エラーになります。

🔚 結論：選ぶ基準

✅ App Router の主な利点