You can connect your Next.js backend to Chrome DevTools with just one command. With Subtrace, you can inspect the status, headers, payload, and latency of all API requests.

For this guide, we’ll use a minimal Next.js app as an example. The app has one page (index.js) and one API handler (app/api/foo/route.js):

// index.jsx
"use client";

export default function App() {
  return (
    <div>
      <h1>Next.js + Subtrace</h1>
      <button onClick={handleClick}>Make a call to the server</button>
    </div>
  );

  async function handleClick() {
    const response = await fetch("/api/foo");
    const data = await response.json();
    alert(data.message);
  }
}

// app/api/foo/route.js
export async function GET(req) {
  return new Response(JSON.stringify({ message: "Hello from the server!" }), {
    headers: { "Content-Type": "application/json" },
  });
}

To get started, download the latest version of Subtrace using the following command:

curl -fsSLO "https://subtrace.dev/download/latest/$(uname -s)/$(uname -m)/subtrace"
chmod +x ./subtrace

Build and start your server using Subtrace:

npm install
./subtrace run -- npm run dev

Open the subt.link URL in your browser to get to the Subtrace dashboard. Go to localhost:3000 and make some requests to the server to see them show up in realtime on the Subtrace dashboard!

You can find the complete source code used in this demo here.

Express.jsSvelteKit