実践：AIのNext.jsコードをレビューする

なぜ学ぶか： Phase 03の総仕上げです。Next.js特有の観点で、AIが生成しがちな「動くけど危ない・遅い」コードをレビューします。下の例には問題が3つ隠れています。まず自分で探してみてください。

まずはこの例を見てみましょう

"use client";                                    // 【?】
import { useEffect, useState } from "react";

export default function Dashboard() {
  const [data, setData] = useState<string[]>([]);

  useEffect(() => {                                 // 【?】
    fetch("https://api.example.com/stats", {
      headers: {
        Authorization: process.env.NEXT_PUBLIC_API_SECRET,  // 【?】
      },
    })
      .then((res) => res.json())
      .then(setData);
  }, []);

  return <ul>{data.map((item) => <li key={item}>{item}</li>)}</ul>;
}

答え：①表示だけなら'use client'不要 ②初期データはサーバーで取る ③NEXT_PUBLIC_のシークレットは全世界公開（最重大）。

コード例

// ↓ 修正後の姿（3つの問題を一気に解決）
// 'use client' なし = サーバーで動く

export default async function Dashboard() {
  // 初期データはサーバーで直接取得
  const res = await fetch("https://api.example.com/stats", {
    cache: "no-store", // 統計は毎回最新を取得（作り置きしない）
    headers: {
      // 無印の環境変数 = サーバー専用。ブラウザには渡らない
      Authorization: `Bearer ${process.env.API_SECRET}`,
    },
  });
  if (!res.ok) throw new Error("取得に失敗しました");

  const data: string[] = await res.json();

  return <ul>{data.map((item) => <li key={item}>{item}</li>)}</ul>;
}

修正前（解説の例）と見比べてください。useState・useEffectが消え、キーはサーバーに残り、コードも短い。「サーバーで取る」だけで全部が良くなりました。