> ## Documentation Index
> Fetch the complete documentation index at: https://factory-changelog-jun25.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> AI コーディングエージェント向けの Next.js Evals の結果と方法論。

export const BarChart = ({data, valueKey, labelKey = "name", valueLabel = "Score", maxValue}) => {
  const values = data.map(d => d[valueKey]);
  const topValue = values[0];
  const minValue = Math.min(...values);
  const baselineOffset = topValue - (topValue - minValue) / 0.8 * 1;
  return <div className="space-y-3 my-6 not-prose">
      {data.map((item, idx) => {
    const value = item[valueKey];
    const percentage = (value - baselineOffset) / (topValue - baselineOffset) * 80;
    const isDroid = item[labelKey].toLowerCase().includes('droid') || item[labelKey].toLowerCase().includes('factory');
    return <div key={idx}>
            <div className="flex items-center gap-2 mb-1.5">
              <span className="w-6 text-sm font-mono text-zinc-400 dark:text-zinc-500 text-right">
                {idx + 1}
              </span>
              <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                {item[labelKey]}
              </span>
            </div>
            <div className="flex items-center gap-3">
              <div className="w-6" />
              <div className="flex-1 h-7 relative flex items-center">
                <div className="h-full rounded-sm transition-all duration-500" style={{
      width: `${percentage}%`,
      background: isDroid ? 'linear-gradient(to right, #f97316, #fb923c)' : 'linear-gradient(to right, #a1a1aa, #d4d4d8)'
    }} />
                <span className="ml-2 text-xs font-mono text-zinc-600 dark:text-zinc-400">
                  {typeof value === 'number' && value % 1 !== 0 ? value.toFixed(1) : value}{valueLabel.includes('%') ? '%' : ''}
                </span>
              </div>
            </div>
          </div>;
  })}
    </div>;
};

export const nextjsEvalData = [{
  name: "Factory Droid (GPT-5.2)",
  accuracy: 66.0
}, {
  name: "Factory Droid (Claude Opus 4.5)",
  accuracy: 56.0
}, {
  name: "Factory Droid (Claude Sonnet 4.5)",
  accuracy: 50.0
}, {
  name: "Factory Droid (Gemini 3 Pro)",
  accuracy: 46.0
}, {
  name: "Claude Code (Claude Opus 4.5)",
  accuracy: 42.0
}, {
  name: "Cursor (Claude Sonnet 4.5)",
  accuracy: 38.0
}];

Next.js のコード生成および移行タスクにおける AI モデルの性能を測定する、[Vercel](https://nextjs.org/evals) の公式ベンチマークです。成功率、実行時間、トークン使用量、品質改善を評価します。

### 結果

<BarChart data={nextjsEvalData} valueKey="accuracy" valueLabel="%" maxValue={100} />

*最終更新: 2025年12月*

### 方法論

| カテゴリ           | 説明                                   |
| -------------- | ------------------------------------ |
| **コード生成**      | Next.js のコンポーネント、ページ、API ルートの作成      |
| **移行**         | Pages Router から App Router へのアップグレード |
| **ベストプラクティス**  | Next.js のパターンと規約への準拠                 |
| **TypeScript** | 適切な型安全性と型推論                          |

評価指標:

* **成功率** - 正しく完了できたタスクの割合
* **実行時間** - タスクを完了するまでの時間
* **トークン使用量** - モデル応答の効率性
* **品質スコア** - コード品質とベストプラクティス

<Card title="Next.js Evals" icon="trophy" href="https://nextjs.org/evals">
  ライブ結果と方法論を見る
</Card>