How to Test a Next.js App End to End

The problem

A Next.js request can pass through middleware, a server component, a route handler, streaming boundaries, and client hydration before anything is usable. Each of those is a place things can break in ways that unit tests and component tests won't catch — a server component that throws only with real data, a redirect that lands wrong, a hydration mismatch that breaks an interaction.

Why the usual approach falls short

• Component tests stop at the component boundary. They don't exercise the server/client round trip.
• A Playwright or Cypress suite is a second codebase that drifts with every routing or layout change.
• SPA-like navigation plus server rendering makes scripted E2E tests flakier — timing between server response, streaming, and hydration is exactly where fixed waits fail.

How Manta fits

Point Manta at your running Next.js app — a Vercel preview URL, staging, or production — and it uses it like a person: following App Router or Pages Router navigation, waiting for streamed content and hydration to settle, submitting forms that hit route handlers, and following middleware redirects. It reports broken flows with screenshots and reproduction steps, and there's nothing to rewrite when you restructure routes.

For the flows that must always work, describe them in plain English.

Keep Vitest and React Testing Library for logic and components — the end-to-end testing guide covers how the layers divide, and Manta vs Playwright covers the E2E-layer tool choice.

What your first run looks like

1. Grab a preview or staging URL and a test account.
2. Start a run; Manta discovers routes and flows as it explores.
3. Review findings and the navigation map; pin the critical flows as plain-English checks.

Where it fits

Unit and component tests underneath, Manta for end-to-end coverage of the running app, a small scripted set for exact assertions. See also how to test a React app end to end.