next-partial-prefetching-adoption

Enables Partial Prefetching in Next.js apps and resolves its dev-overlay insights.

Updated Aug 5, 2024
One-click install
npx skills add https://github.com/SethyRung/movie-next --skill next-partial-prefetching-adoption-sethyrung
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-partial-prefetching-adoption
Source: https://github.com/SethyRung/movie-next/tree/main/.agents/skills/next-partial-prefetching-adoption
Command: npx skills add https://github.com/SethyRung/movie-next --skill next-partial-prefetching-adoption-sethyrung

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adopting Partial Prefetching in a Next.js 16.3+ 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 without a structured process. ## Core Features & Use Cases - Link Prefetch Audit: Enumerates declarative <Link prefetch={true}> and imperative router.prefetch() call sites across the source tree and adopts each destination route. - Insight-Driven Sweep: Drives the running app in a browser to surface and resolve the instant-link-prefetch-partial and instant-shell-url-data insights from the dev overlay and dev log. - Production Verification: Confirms shared App Shells paint on navigation under next build/next start, since prefetching only runs in production. - Use Case: A team on Next.js 16.3 with Cache Components enabled wants to turn on Partial Prefetching; the skill walks them route by route, adds use cache boundaries where prefetched data must be preserved, and hands off a per-link prefetching decision list. ## Quick Start Ask the AI to adopt Partial Prefetching in your Next.js app by auditing the Link prefetch calls and enabling the partialPrefetching 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 Next.js?

Set partialPrefetching: true in next.config.ts alongside cacheComponents: true, which requires Next.js 16.3 or later. Before enabling globally, audit each <Link prefetch={true}> destination and opt it in with export const prefetch = 'partial' so the migration insight stays visible.

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 hard requirement; the partialPrefetching flag depends on it. Full Cache Components adoption is ideal but not a gate, since prerender insights on unadopted routes are non-blocking dev signals.

Why don't prefetch insights appear in next build or production?

The prefetch insights surface only in next dev, in the dev overlay's Insights tab and the dev server log; nothing fails the build. However, actual prefetching behavior is production-only, so verification of the shared App Shell requires next build and next start.

What happens to router.prefetch() calls after enabling Partial Prefetching?

Imperative router.prefetch() calls have no dev insight, so the sweep does not cover them. Verify them under next start by comparing the _rsc prefetch response before and after, and migrate call sites to <Link prefetch={true}> or cached data if the old behavior is lost.