1. Add the subtrace-next package to your app:

npm install subtrace-next

1. Import the package at the top-level:

// top level file, usually layout.tsx
import "subtrace-next";

This will automatically trace all the outgoing requests in your Next.js app.

1. Add instrumentation to trace incoming requests. In your route.ts files, wrap your route handlers with the trace function:

// app/api/foo/route.ts
import { NextRequest, NextResponse } from "next/server";

import { trace } from "subtrace-next";

export const GET = trace((request: NextRequest) => {
  const { searchParams } = new URL(request.url);
  const name = searchParams.get("name") || "World";

  const responseData = {
    message: `Hello ${name}!`,
    method: "GET",
    timestamp: new Date().toISOString(),
    query: Object.fromEntries(searchParams.entries()),
  };

  return NextResponse.json(responseData);
});

1. Add the SUBTRACE_TOKEN environment variable to your preview/production environments on Vercel:

Mark this as a sensitive environment variable.

If you don't have a Subtrace token, you can get one on the Tokens page of the dashboard.

1. Deploy your app as you normally would (eg: with vercel deploy)

And that's it! You can see a realtime stream of your app's requests on the Subtrace dashboard.