Router Act

If you're writing tests for Next.js client router behavior, this is how you properly test prefetch requests and navigation without flaky polling or retry loops. The createRouterAct utility gives you an end-to-end way to assert on network responses and cache behavior without coupling to protocol details. The core idea is to use LinkAccordion to control prefetch timing and prefer 'no-requests' assertions when data should come from cache, which is the strongest proof your cache actually works. Skip it entirely if you just need to wait for UI to appear after navigation. The skill documentation is opinionated about avoiding the block feature and eliminating inherently flaky patterns, which suggests this comes from real pain points in the Next.js codebase.

skills.sh installs: 549
GitHub stars: 139.5K
last updated: May 16, 2026

View on GitHub

Install

$ npx -y skills add vercel/next.js --skill router-act --agent claude-code

Installs into .claude/skills of the current project.

Files

Router Act Testing

Use this skill when writing or modifying tests that involve prefetch requests, client router navigations, or the segment cache. The createRouterAct utility from test/lib/router-act.ts lets you assert on prefetch and navigation responses in an end-to-end way without coupling to the exact number of requests or the protocol details. This is why most client router-related tests use this pattern.

When NOT to Use `act`

Don't bother with act if you don't need to instrument the network responses — either to control their timing or to assert on what's included in them. If all you're doing is waiting for some part of the UI to appear after a navigation, regular Playwright helpers like browser.elementById(), browser.elementByCss(), and browser.waitForElementByCss() are sufficient.