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

# NextJS

> Next.js Evals results and methodology for AI coding agents.

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
}];

Official benchmark from [Vercel](https://nextjs.org/evals) measuring AI model performance on Next.js code generation and migration tasks. Evaluates success rate, execution time, token usage, and quality improvements.

### Results

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

*Last updated: December 2025*

### Methodology

| Category            | Description                                        |
| ------------------- | -------------------------------------------------- |
| **Code Generation** | Creating Next.js components, pages, and API routes |
| **Migration**       | Upgrading from Pages Router to App Router          |
| **Best Practices**  | Following Next.js patterns and conventions         |
| **TypeScript**      | Proper type safety and inference                   |

Scoring metrics:

* **Success Rate** - Percentage of tasks completed correctly
* **Execution Time** - Time to complete tasks
* **Token Usage** - Efficiency of model responses
* **Quality Score** - Code quality and best practices

<Card title="Next.js Evals" icon="trophy" href="https://nextjs.org/evals">
  View live results and methodology
</Card>