App Routerの衝撃

Next.jsがバージョン13をリリースした後、フロントエンド界隈に大きな衝撃が走りました。彼らはApp Routerという全く新しいアーキテクチャを導入したのです。

もしあなたが以前Reactを学んだことがあるなら、コンポーネントがuseState（状態管理）やonClick（クリックイベント）で満たされていることを知っているかもしれません。 しかしApp Routerでは、すべてのコンポーネントは容赦なく2つの陣営に分けられます：**Server Components（サーバーサイドコンポーネント）とClient Components（クライアントサイドコンポーネント）**です。

これは現在AIがNext.jsのコードを書く際に最も「幻覚」や「エラー」を起こしやすい部分でもあるので、その違いをしっかり理解する必要があります！

Server Components（サーバーサイドコンポーネント）

App Routerでは、すべてのコンポーネントは「デフォルト」でServer Componentsです。

これを「サーバールーム内」で実行されるコードと想像してください。

• メリット：データベースに直接接続可能（サーバー上で動作するため）、APIキーを安全に記述できユーザーに漏れる心配がない、コードバンドルサイズが0（純粋なHTMLとしてブラウザに送信されるため）。
• 致命的な欠点：インタラクティブではない！静的なHTMLを生成するだけなので、useStateやuseEffectは使用不可、onClickイベントもバインド不可。もしServer ComponentでonClickを書いたら、コンパイラが即座に真っ赤なエラーを吐き出します。

Client Components（クライアントサイドコンポーネント）

「クリックでカウントアップするボタン」や「入力フォーム」を作りたい場合、システムにはっきりと「このコンポーネントはユーザーのブラウザで実行して！」と伝える必要があります。

Client Componentを宣言するには、ファイルの最上行にこの神聖な呪文を追加します：

"use client";

この呪文を追加すれば、コンポーネントはお馴染みのReactの世界に戻り、すべてのHookやクリックイベントを自由に使えるようになります。

なぜ全部"use client"にしないのか？

もしすべてに"use client"を追加すると、Next.jsの能力の半分以上を放棄することになります（従来のSPAの弱点に逆戻り：ファイルサイズが大きい、SEOに難あり、データベースに直接接続不可）。

現代的な最適なアーキテクチャ設計は： 大きなページ（例：記事一覧、ブログレイアウト）をServer Componentとして設定し、インタラクティブな小部品（例：いいねボタン、コメント入力欄）だけをClient Componentとして分割して作成し、それらを大きなページに組み込むことです。

これにより「完璧なSEOと読み込み速度」と「スムーズなユーザーインタラクション」を両立できます！

次章では、AIにこの最新ルールを確実に守らせるVibe Promptの書き方を実戦形式で教えます！

---

🎁 [VIP限定ボーナス] Next.js企業向けパフォーマンスチューニングと受注トーク

クライアントがあなたにサイト制作を依頼する際、最も気にするのは大抵2つだけです：「サイトの速度は速いか？」 そして 「Google検索で1ページ目に表示��れるか？」 これがNext.jsをマスターする必要がある理由です。このボーナス章では、Next.jsのパフォーマンスを極限まで引き出す方法と、それをあなたの見積もり書のゴールデンアイテムに変える方法を伝授します。

1. 究極の武器：Next.js Imageコンポーネント (next/image)

従来のサイトが遅い原因の90%は画像が大きすぎるためです。 Next.jsで従来の<img src="...">を使うと、Cursorのリンターが即座に警告を出します。 Next.js専用の<Image>コンポーネントを使いこなす必要があります。

✅ Vibe Prompt例：

「このセクションの画像をnext/imageコンポーネントに置き換えてください。

1. 画像がコンテナにレスポンシブにフィットするようlayout="fill"とobjectFit="cover"を設定してください。
2. これはホームページのメイン画像（Hero Image）なので、priority属性を追加してブラウザにこの画像を優先的に読み込ませ、LCPスコアを向上させてください。」

priorityという単語を追加するだけで、GoogleのCore Web Vitals（コアウェブバイタル）スコアが大幅に向上します。この満点のレポートをクライアントに見せれば、彼らはこの投資が非常に価値があったと感じるでしょう。

2. 静的生成（SSG）vs サーバーサイドレンダリング（SSR）のビジネス選択

Next.jsには2つのレンダリングモードがあり、アーキテクトとしてクライアントに適切な選択を提案する必要があります：

• SSG（Static Site Generation）：デプロイ（Build）時にウェブページを純粋なHTMLに変換。
  • 適したシナリオ：コーポレートサイト、ブログ記事。
  • メリット：超高速（データベースからデータを取得する必要がないため）、百万トラフィックでもダウンしない。
• SSR（Server-Side Rendering）：ユーザーがクリックするたびにサーバーが最新データを取得してページを生成。
  • 適したシナリオ：ECサイト商品ページ、株価表示、個人ダッシュボード。
  • メリット：データが常に最新。

💡 受注交渉のトーク： クライアントにはこう伝えられます：「競合他社のサイトはWordPressで作られています。1000人が同時にアクセスしたら確実にダウンします。しかし私がNext.jsのSSGアーキテクチャでホームページを設計し、VercelのグローバルCDNエッジノードを活用すれば、数万人が同時アクセスしてもサイトは快適に動作し、注文を逃すことはありません。」 これが技術用語を、経営者が理解できる「ビジネス言語」に翻訳する技術です。

3. Vercelデプロイの隠れた落とし穴：環境変数（Env Vars）

Next.jsをVercelにデプロイする際、最もよく発生する悲劇が「ローカルでは動くのに本番環境で全滅」です。 これは100%、Vercelの管理画面で環境変数（.env）を設定し忘れたことが原因です。

Supabaseキー、ECPay APIキー、OpenAIキーなどをプロジェクトで使用する場合、デプロイ前に必ずVercelプロジェクトの Settings > Environment Variables に変数を1つずつ貼り付けてからDeployを押す習慣を身につけてください。 この細部を守ることで、毎回のプロジェクト公開を完璧な花火大会にすることができます！

よくある問題と解決策

| 問題 | 原因 | 解決方法 | |------|------|---------| | 期待通りの結果が出ない | パラメータ設定ミス | デフォルト値と境界条件を確認 | | 実行が遅い | アルゴリズムの効率 | より効率的なデータ構造を使用 | | メモリ不足 | データ量過多 | バッチ処理を検討 | | デバッグが困難 | ログ不足 | 詳細なログ出力を追加 |

さらに学ぶには

• 公式ドキュメントを読む
• GitHubのオープンソース例を参照
• コミュニティディスカッションに参加
• コードを修正して結果の変化を観察

パフォーマンスの考慮事項

大規模データセットや複雑な計算を扱う場合:

1. 時間計算量: Big Oを分析して最適化
2. 空間計算量: メモリと速度のバランス
3. キャッシング: 計算結果を保存して再計算を回避
4. 並列処理: 独立したタスクのマルチスレッド化
5. プロファイリング: 最適化前に計測

実世界での応用

この概念は以下で広く使われています:

• Web開発（ルーティング、認証）
• データサイエンス（特徴量エンジニアリング）
• ゲーム開発（経路探索、物理演算）
• モバイルアプリ（状態管理、キャッシュ）