Star us on GitHub
Star
Menu

Next.js Tracing

Learn how to set up highlight.io tracing for your Next.js application.
1
Install the relevant Highlight SDK(s).

Install @highlight-run/next with your package manager.

npm install --save @highlight-run/next
Copy
2
Wrap your Page Router endpoints

The Highlight Next.js SDK supports tracing for both Page and App Routers running in the Node.js runtime.

import { NextApiRequest, NextApiResponse } from 'next' import { withPageRouterHighlight } from '@/app/_utils/page-router-highlight.config' import { H } from '@highlight-run/next/server' export default withPageRouterHighlight(async function handler( req: NextApiRequest, res: NextApiResponse, ) { return new Promise<void>(async (resolve) => { const span = await H.startActiveSpan('page-router-span', {}) console.info('Here: /pages/api/page-router-trace.ts ⌚⌚⌚') res.send(`Trace sent! Check out this random number: 0.7787860409482432`) span.end() resolve() }) })
Copy
3
Wrap your App Router endpoints

The Highlight Next.js SDK supports tracing for both Page and App Routers running in the Node.js runtime.

import { NextRequest, NextResponse } from 'next/server' import { withAppRouterHighlight } from '@/app/_utils/app-router-highlight.config' import { H } from '@highlight-run/next/server' export const GET = withAppRouterHighlight(async function GET( request: NextRequest, ) { return new Promise(async (resolve) => { const span = await H.startActiveSpan('app-router-span', {}) console.info('Here: /pages/api/app-router-trace/route.ts ⏰⏰⏰') span.end() resolve(new Response('Success: /api/app-router-trace')) }) })
Copy
4
Verify your backend traces are being recorded.

Visit the highlight traces portal and check that backend traces are coming in.