skills.rest
Foodshareclub
FoodshareclubOFFICIAL
Explore all skills by this author →
Website𝕏@foodshareclubGitHub

next-partial-prefetching-adoption

Enables Partial Prefetching in Next.js apps and resolves the dev insights it surfaces.

Updated Dec 17, 2022
Search Tags:#performance#migration#next.js#app router#prefetch#cache components#partial prefetching
One-click install
npx skills add https://github.com/Foodshareclub/foodshare-web --skill next-partial-prefetching-adoption-foodshareclub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-partial-prefetching-adoption
Source: https://github.com/Foodshareclub/foodshare-web/tree/main/.agents/skills/next-partial-prefetching-adoption
Command: npx skills add https://github.com/Foodshareclub/foodshare-web --skill next-partial-prefetching-adoption-foodshareclub

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adopting Partial Prefetching in a Next.js app requires auditing every <Link prefetch={true}> call, opting routes in with export const prefetch = 'partial', enabling the partialPrefetching flag, and clearing dev-overlay insights — a multi-step migration that is easy to get wrong or leave half-finished. ## Core Features & Use Cases - Link Prefetch Audit: Enumerates <Link prefetch={true}> and imperative router.prefetch() call sites across the source tree and adopts each destination route with the prefetch = 'partial' segment config. - Guided Flag Rollout: Enables partialPrefetching: true in next.config.ts and strips redundant route exports using the official remove-partial-prefetch codemod. - Insight Sweep & Verification: Drives the running app in a browser to clear instant-link-prefetch-partial and instant-shell-url-data insights, then validates shared App Shell behavior against a production next build/next start run. - Use Case: A team on Next.js 16.3 with Cache Components enabled wants instant navigations; the skill walks their app route by route, fixes URL-data reads with <Suspense> boundaries, and hands back a verified production demo. ## Quick Start Ask the AI to adopt Partial Prefetching in your Next.js app and resolve every prefetch insight the dev overlay reports.

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 Next.js?▼

Set partialPrefetching: true in next.config.ts alongside cacheComponents: true, which is the hard requirement. Before enabling globally, audit <Link prefetch={true}> destinations and opt them in with export const prefetch = 'partial' so the adoption insights can fire.

What does the instant-link-prefetch-partial insight mean in Next.js?▼

It fires in next dev when you navigate through a <Link prefetch={true}> whose destination route has not adopted Partial Prefetching. Adding export const prefetch = 'partial' to the destination route clears the insight for every link pointing at it.

Does Partial Prefetching work without Cache Components?▼

No. Cache Components (cacheComponents: true) is the only hard requirement; the partialPrefetching flag depends on it. You also need Next.js 16.3 or later, where the flag, the prefetch route segment config, and the prefetch insights all landed.

Why don't prefetch insights appear in my Next.js build output?▼

Prefetch insights are dev-only signals shown in the dev overlay's Insights tab and logged in the dev server terminal; they never fail the build. Verifying actual prefetch behavior requires a production run with next build and next start, since prefetching is prod-only.

How do I remove export const prefetch = 'partial' after enabling the flag?▼

Run the first-party codemod: npx @next/codemod@latest remove-partial-prefetch ./app. It removes only the 'partial' exports and their generated guide comments, leaving other prefetch values and TODO(per-link-prefetch) markers in place.

When should I keep <Link prefetch={true}> after adopting Partial Prefetching?▼

Keep it only for routes keyed by params or searchParams where you want URL-specific data resolved before the click, after weighing the per-link server invocation cost. Otherwise the default link warming only the shared App Shell is the intended behavior.

Related Skills

Explore More Software Engineering Skills→
MohamadJoumaaMohamadJoumaa

next-cache-components-adoption

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

Community
Advanced
sanity-iosanity-io
952

next-cache-components-optimizer

Drives Next.js routes to instant navigation using test-driven Cache Components optimization.

Official
Advanced
MohamadJoumaaMohamadJoumaa

next-cache-components-optimizer

Drives Next.js routes to instant navigation using test-driven Cache Components optimization.

Community
Advanced
vercelvercel
142.0k

next-partial-prefetching-adoption

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

Official
Advanced