[pull] canary from vercel:canary#1117
Merged
Merged
Conversation
When Cache Components is enabled, a `next dev` load that streams while
filling an empty cache is not representative of production: cached
content streams in as it is computed rather than being served instantly,
and React's DevTools cannot accurately show what would normally suspend.
This surfaces that state in the dev indicator. While a client navigation
is pending the rendering pill is colored and labeled by the cache state
(teal "Rendering" normally, orange "Rendering (cold cache)" when the
render hit an empty cache, and orange "Rendering (cache disabled)" when
caches were bypassed), and once the load settles a cold or bypassed load
leaves a persistent, dismissible orange badge ("Cold cache" or "Cache
disabled") with an info panel that explains why the load was not
production-like and suggests reloading once the caches are warm.
https://github.com/user-attachments/assets/9be2c35a-3a36-47d7-8803-6e284c332a4b
The indicator's displayed state is now owned by a single state machine,
`useIndicatorDisplay`, rather than being composed from a debounce
(`useDebouncedValue`) and a delayed render (`useDelayedRender`) whose
delays compounded and were hard to reason about. It models the indicator
as an explicit set of phases (idle, entering, pill, exiting, badge)
driven by the raw compiling, rendering, and cache-status signals, and it
hands the rendering pill off to the persistent badge in a single commit
so the indicator never collapses to the bare logo between them. It also
unifies the pre-existing "Cache disabled" badge with the new cold-cache
state so both flow through one path (a navigation shows "Rendering
(cache disabled)" and then settles into the badge). The Cold cache badge
tracks the most recent load, so a later navigation that settles warm
clears it.
The rework also collapses the timing into a single 200ms window for both
showing and hiding, matching the transition used elsewhere in the dev
overlay, and relabeling between active states (for example "Compiling"
to "Rendering", or the flip to the cold-cache color) is now immediate.
This is intentional: the previous debounce held a label on screen past
the moment its underlying state ended, so "Compiling" could linger after
the compile had finished and make the bundler look slower than it
actually was. The one genuine flicker the old debounce guarded against,
the pill blinking out to the bare logo when the status briefly drops
between rapid compile bursts, is still prevented by the new exit linger.
Two cases are knowingly not handled yet: a short-lived `'use cache'`
entry and a `'use cache: private'` entry both report a miss on every
load, so they show the badge even on a warm reload. These are
limitations of the current dev cache behavior rather than of the
indicator, and the tests cover them with `TODO`s that point at the
follow-up changes that will fix them.
…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 -->
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )