Testing Next.js App Router API Routes Without Leaving Your Editor

Saurabh Wankhade — Thu, 20 Aug 2026 07:41:13 +0000

If you work with Next.js, you know this routine. Write an API route, switch to Postman or Thunder Client, rebuild the request, test it, then jump back to your code. Do this a few times a day and it starts to eat into your focus.

The problem is not that these tools are bad. It is the constant context switch. Your routes live in your codebase, but your tests live somewhere else, usually behind a login screen.

Why the usual workflow gets annoying

If you have worked on a decent-sized Next.js project, this will feel familiar:

Collections go stale the moment someone adds a route and forgets to update them
Sharing test collections across a team means exporting, importing, or paying for a shared workspace
Nested routes like app/api/orders/[id]/route.ts are tedious to recreate by hand in another tool
Request data and tokens often end up stored on someone else's server

None of this breaks your app. But it makes testing feel like extra work, so people end up skipping it more than they should.

A simpler way to think about it

The more natural setup is to test routes right where you write them, inside the editor. No new app to open, no login, no collection to keep syncing by hand.

A few extensions in the VS Code ecosystem are starting to take this approach, scanning your project for routes automatically and letting you test them without leaving your code. Some also save collections as plain JSON files instead of locking them into a proprietary format, so they can just live in your repo and stay in sync through git like any other file.

For App Router projects specifically, this helps a lot with dynamic routes like:

app/api/orders/route.ts app/api/orders/[id]/route.ts app/api/orders/[id]/status/route.ts

Instead of manually adding each one somewhere else, the tool picks them up on its own, and testing becomes a quick in editor action instead of a whole separate workflow.

Worth trying

If switching tabs to test a simple API call has been slowing you down, it is worth looking at editor-based options like Dragonfly for VS Code. Small change, but it removes a chunk of daily friction most of us just got used to putting up with.

Need help to test Dragonfly

Saurabh Wankhade — Sat, 08 Aug 2026 19:13:23 +0000

Dragonfly a VS Code extension I’m building to test REST APIs without leaving the editor.

Currently it supports:

Importing Next.js API routes
Syncing routes with the codebase
Importing cURL
POST, PUT and PATCH body generation
Environments and common headers

If you have some time, give it a try and let me know what you think or if you find any bugs.

Live

DEV Community: Saurabh Wankhade

Testing Next.js App Router API Routes Without Leaving Your Editor

Need help to test Dragonfly