skills.rest
MohamadJoumaa
MohamadJoumaaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

next-partial-prefetching-adoption

Guides adoption of Partial Prefetching in Next.js apps through audits, baselines, and verification.

Updated Aug 26, 2026
Search Tags:#migration#next.js#playwright#app router#prefetch#cache components#partial prefetching
One-click install
npx skills add https://github.com/MohamadJoumaa/Direct --skill next-partial-prefetching-adoption-mohamadjoumaa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-partial-prefetching-adoption
Source: https://github.com/MohamadJoumaa/Direct/tree/main/.cursor/skills/next-partial-prefetching-adoption
Command: npx skills add https://github.com/MohamadJoumaa/Direct --skill next-partial-prefetching-adoption-mohamadjoumaa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @next/playwright, @playwright/test, @next/codemod, and includes references (resource) components.

What problem does it solve? Migrating a Next.js app to Partial Prefetching is risky: enabling the flag changes what every link prefetches, and without a structured process you can silently lose prefetched UI, break routes, or misread dev-only insights. This Skill sequences the entire adoption so each route preserves the prefetched UI that matters. ## Core Features & Use Cases - Link audit and preservation baseline: Enumerates every <Link prefetch={true}> and router.prefetch() call, then locks the legacy prefetched UI in a production-mode instant() Playwright suite before any flag change. - Staged adoption workflow: Opts routes in with export const prefetch = 'partial', enables the global partialPrefetching flag, runs the remove-partial-prefetch codemod, and sweeps for URL-data insights in next dev. - Production verification: Confirms shared App Shells paint instantly under next start, validates caching changes, and walks optional per-link prefetch decisions with the user. - Use Case: A team on Next.js 16 with Cache Components enabled wants to turn on Partial Prefetching across a large app; the Skill audits all links, builds a flag-off test baseline, adopts routes one by one, and hands back a verified production demo. ## Quick Start Ask the assistant to adopt Partial Prefetching in your Next.js app, starting with an audit of all Link prefetch behavior before enabling the flag.

Frequently Asked Questions about next-partial-prefetching-adoption

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable Partial Prefetching in a Next.js app?▼

Set partialPrefetching: true in next.config alongside cacheComponents: true, after opting routes in with export const prefetch = 'partial'. Audit existing Link prefetch={true} navigations first and lock their prefetched UI in a test baseline before flipping the flag.

What is the difference between the App Shell and URL data in Next.js prefetching?▼

The App Shell is the shared static content every link to a route prefetches by default. URL data is the params or searchParams-specific content that only prefetches when a route adopts Partial Prefetching and a link uses prefetch={true}.

Does Partial Prefetching require Cache Components in Next.js?▼

Yes, both the partialPrefetching flag and the route-level prefetch export require cacheComponents: true with a passing build. Adopt Cache Components first and resolve its build-blocking prerender errors before starting Partial Prefetching adoption.

Why do prefetch insights not appear in the Next.js dev overlay?▼

The Insights tab only appears after an insight has fired, so a clean route shows no tab at all. Confirm the quiet state from the dev server log, and check for blocking-prerender errors, which replace insights on their route.

Can I verify Partial Prefetching behavior in next dev?▼

No, automatic prefetching runs only in production builds. Use next build and next start with the @next/playwright instant() helper and exposeTestingApiInProductionBuild enabled to verify preserved prefetched UI.

What does the remove-partial-prefetch codemod do?▼

It removes every export const prefetch = 'partial' and its generated guide comment after the global flag is enabled, since the per-route exports become redundant. Other prefetch values and TODO(per-link-prefetch) markers are left in place.

Related Skills

Explore More Software Engineering Skills→
FranciscoMorettiFranciscoMoretti
1.2k

next-cache-components-adoption

Migrates Next.js App Router projects to Cache Components and resolves blocking-route build errors.

Community
Advanced
ri-ruri-ru

next-partial-prefetching-adoption

Enable Partial Prefetching in Next.js 16.3 applications via route-level configuration.

Community
Advanced
vercelvercel
142.0k

next-partial-prefetching-adoption

Enable Partial Prefetching in Next.js apps and preserve legacy prefetched UI.

Official
Advanced
Agent-Pattern-LabsAgent-Pattern-Labs
4

mcporter

Manage MCP servers and tools over HTTP or stdio protocols.

Official
Intermediate