Files
next.js/errors
Aurora ScharffandGitHub 0a518a84e9 instant: build fix-card Copy AI prompt dynamically from title + link (#94637)
### What

The dev-overlay fix cards' `Copy AI prompt` button used to copy a
multi-paragraph instruction string baked into each card (71 prompts
across docs + runtime). This PR replaces that with a dynamic template
the button builds at click time:

```
Apply the [Stream] "Wrap in or move into Suspense" fix to the Next.js Insight raised in this project.

Steps:

1. The failing code is in the error block below — it may be a data-access call, a hook call, a metadata or viewport export, or a component. The fix applies to that exact code; don't touch unrelated files.

2. Read the rule docs at <rule-url> for the full Insight explanation, then read the fix section at <fix-url>. Pick the pattern under "### Patterns" that matches the failing code, then read "### Gotchas" before editing — they list constraints that are easy to miss. Use the canonical imports and code shape from the page; don't improvise variations.

3. Apply the chosen pattern to the code identified in step 1.

## Error Type
Blocking Route

## Error Message
Route "/01-cookies-body": ...
    at Page (app/01-cookies-body/page.tsx:4:26)

## Code Frame
> 4 |   const c = await cookies();
    |                          ^
...

Next.js version: 16.3.0-canary.47 (Turbopack)
```

### Why

Old verbatim prompts repeated what the docs already say and never
anchored the fix to the actual error. The new template:

- Names the chosen fix (group badge + title) so the agent picks the
right pattern.
- Points at the rule docs AND the specific fix anchor, with explicit
instructions to read `### Patterns` and `### Gotchas`.
- Prepends the live error block (same shape the existing 'Copy error
info' button emits) so the agent has the failing file, line, code frame,
and stack inline — no need to re-fetch the dev overlay.

### Changes

- `FixCard` type: `prompt?: string` → `copyable?: boolean`
- `CopyPromptButton`: takes `title + group + link + generateErrorInfo`,
builds the prompt
- Refactored `generateErrorInfo` from `errors.tsx` into a shared
`utils/generate-error-info.ts` so the existing 'Copy error info' button
and the fix-card 'Copy AI prompt' button format the error block
identically
- 14 error MDX pages: every `prompt={...}` removed (36 strings)
- `instant-guidance-data.ts`: every `prompt: '...'` → `copyable: true`
(35 strings)
- Skill (`.agents/skills/insight-error-page/SKILL.md`): updated

### Pairs with

vercel/front#73087 — same template in the docs-site `<FixOption>`
(without the error block, since there's no live error on a docs page).

<!-- NEXT_JS_LLM_PR -->
2026-06-10 13:23:11 +02:00
..
2025-05-08 13:11:38 +01:00
2025-05-12 08:32:57 -05:00
2025-05-12 08:32:57 -05:00