skill

Next Partial Prefetching Optimizer

Vercel0+ تثبيتموثوق

نبذة

# Partial Prefetching optimizer

Optimize each requested source link and destination as its own contract. Turn the requested prefetched UI, navigation-only UI, and trigger into a production [`instant()`](https://nextjs.org/docs/app/guides/instant-navigation#prevent-regressions-with-e2e-tests) test. Record the current behavior, make the smallest optimization, verify the differential, and keep the passing test as regression coverage.

Before making framework changes, read the bundled Optimizing prefetching guide at `node_modules/next/dist/docs/01-app/02-guides/optimizing-prefetching.md`. If the bundled guide is unavailable, use the [online guide](https://nextjs.org/docs/app/guides/optimizing-prefetching). It is the source of truth for prefetch stages, `prefetch={true}`, session-specific UI, and cost trade-offs.

When the work changes what belongs in the App Shell, follow the [Instant navigation](https://nextjs.org/docs/app/guides/instant-navigation) and [Caching](https://nextjs.org/docs/app/getting-started/caching) docs for cache placement, Suspense boundaries, loading UI, and authorization.

The guides own framework behavior and implementation patterns. This skill owns the navigation contract, production rig, trustworthy RED-to-GREEN loop, parity check, differential, and report.

This is not an adoption skill. If Cache Components or Partial Prefetching are not adopted, use their adoption skills and return to this workflow. If the App Shell itself cannot commit under `instant()`, use `next-cache-components-optimizer` first, then resume the selected navigation.

Run the workflow unattended. Resolve the contract from the request and the existing application. Stop for user input only when a product decision is genuinely blocked and cannot be inferred safely without changing cost, freshness, authorization, or user-visible behavior.

## Reporting to the user

This loop runs unattended, so do not stop between implementation steps. Finish the navigations the user named, then check in. The rig, lock, RED/GREEN loop, and stage names are internal scaffolding; report the product behavior instead.

- **Speak their language.** Describe the source link and result in terms of what the user sees before and after the click, not the validation mechanics. - **Show, don't tell.** Drive the exact link in a production browser so the user sees which content is already available and which content streams after the click. If a live demonstration is unavailable, attach before/after captures. - **Give them a concise click-through list, not a technical results table.** Use one line per navigation with the source URL, link to click, UI ready before the click, UI that waits for navigation, and whether prefetching starts in the viewport or after intent. - **Only surface a question for a genuine fork.** Ask when the choice changes cost, freshness, authorization, or visible behavior. If the user already requested a PR or named every navigation, finish that scope without asking again.

## Define the contract

Inspect the source route, the exact link or interaction, the destination's Suspense boundaries, its data reads, existing prefetch policy, and any existing `instant()` test. Record:

- which destination UI should be ready before the click; - which reusable UI should wait for navigation; - whether per-link prefetching should start in the viewport or only after intent.

The trigger is part of the contract. Two links to the same URL may use different prefetch policies and need separate tests.

Use the guide's cost model when the trigger is not already specified. Do not silently increase the number of links that can invoke the server or cache data whose freshness contract is unknown.

## Reuse the production rig

Read an existing `instant-nav.rig.md`. Cache Components optimization, Partial Prefetching adoption, and this optimizer share the same build, auth, data, and Playwright contract. Add the exact source link, destination markers, and prefetch budget instead of creating another rig.

If the project has no rig, use [`rig-template.md`](rig-template.md) to discover and record one. The measured run must be a production build or preview where `experimental.exposeTestingApiInProductionBuild` is enabled only for testing. Development can help diagnose a route, but automatic link prefetching is production-only.

## Prove the current behavior

Search for an existing `instant()` test for the exact source link and destination. Extend it when it already covers the same behavior. Otherwise, add a focused click-driven test using the guide's [prefetched and deferred content testing](https://nextjs.org/docs/app/guides/optimizing-prefetching#test-prefetched-and-deferred-content) pattern.

Keep one production browser test per source-link, destination, and trigger contract. Do not loop over several destinations or collect their readiness results in one test. Focused tests can still run serially in one browser worker.

First, run an unloc

التثبيت

شغل هذا الأمر

git clone https://github.com/vercel/next.js && cp -r next.js/skills/next-partial-prefetching-optimizer ~/.claude/skills/

يعمل مع

claude appclaude codeclaude apicursorcodexwindsurfclinezed

خطوات التثبيت

Clone the repository and copy the `skills/next-partial-prefetching-optimizer` folder into your Claude skills directory. Compatible with Claude Code, Cursor, Codex, and any Agent Skills-compatible agent.

عرض المصدر
الرخصة: MITبواسطة Vercel

أسئلة شائعة

كيف أثبت Next Partial Prefetching Optimizer؟

شغل هذا الأمر في الطرفية:

git clone https://github.com/vercel/next.js && cp -r next.js/skills/next-partial-prefetching-optimizer ~/.claude/skills/
مع أي أدوات ذكاء اصطناعي تعمل Next Partial Prefetching Optimizer؟

تعمل مع claude_app، claude_code، claude_api، cursor، codex، windsurf، cline، zed.

من طور Next Partial Prefetching Optimizer؟

طورها Vercel، وتصدر بترخيص MIT.

هل Next Partial Prefetching Optimizer مجانية؟

نعم، يمكنك استخدامها مجانا وفق ترخيص MIT.

أصول ذات صلة

مختارات أخرى في التطوير والبرمجة.

كل بدائل Next Partial Prefetching Optimizer ←
skillclaude_appclaude_codeclaude_api
npx skills add google/agents-cli
Google Agents Cli Adk Code
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent",…358,165+
skillclaude_appclaude_codeclaude_api
npx skills add google/agents-cli
Google Agents Cli Workflow
This skill should be used when the user wants to "develop an agent", "build an agent using ADK", "run the agent locally", "debug agent code", "test an…357,749+
skillclaude_appclaude_codeclaude_api
npx skills add google/agents-cli
Google Agents Cli Eval
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze…357,721+
skillclaude_appclaude_codeclaude_api
npx skills add google/agents-cli
Google Agents Cli Deploy
This skill should be used when the user wants to "deploy an agent", "deploy my ADK agent", "set up CI/CD", "configure secrets", "troubleshoot a deploy…357,661+
skillclaude_appclaude_codeclaude_api
npx skills add google/agents-cli
Google Agents Cli Publish
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini Enterprise", "publish to G…357,490+
skillclaude_appclaude_codeclaude_api
npx skills add prisma/skills
Prisma Cli
Prisma ORM CLI commands reference covering init, generate, migrate, db, dev, complete, studio, validate, format, debug, and mcp. Use for ORM/database…309,452+

افحص قبل التثبيت

شغل أي مصدر عبر فحوصاتنا - الظهور في الذكاء الاصطناعي والأمان والأداء واكتشاف التقنيات.

المزيد في التطوير والبرمجة