Drive Next.js routes to instant navigation with a test-driven agentic loop

Executive Summary

Solve slow Next.js route navigation by automating route-level fixes until an @next/playwright instant() e2e passes. An agentic loop discovers project infra, runs targeted tests per route, applies Suspense push-down patterns, and ships tests as regression guards. Next.js adoption and the Cache Components / Suspense model create a concrete, repeatable target - instant navigation - that can be verified with the new @next/playwright instant() e2e API cited in the source. Modern CI/CD and Playwright test automation make route-level verification practical to run as part of pipelines, and rising business focus on navigation performance due to conversion and Core Web Vitals penalties makes automated per-route remediation valuable. The source also describes a verify-red gate and the rig.md discovery step, showing current toolchains are mature enough to automate both detection and test-driven remediation. This skill bundles domain knowledge about Next.js Cache Components, Suspense push-down fixes, and the @next/playwright instant() API into an agentic loop that both drives fixes and ships the passing test as the regression guard. The source shows concrete workflow design - encode the goal as a failing instant() e2e, iterate until green, run once per route, and record project build/deploy/test discovery in instant-nav.rig.md - which yields a repeatable, auditable conversion process rather than one-off advice. That gives speed-to-value versus consultancies and DIY scripts because it automates discovery and verification across the app while producing committed tests as artifacts.