Next.js Quick Start

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

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 } = H.startWithHeaders('page-router-span', {}) console.info('Here: /pages/api/page-router-trace.ts ⌚⌚⌚') res.send(`Trace sent! Check out this random number: 0.08129471029982405`) span.end() resolve() }) })

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 } = H.startWithHeaders('app-router-span', {}) console.info('Here: /pages/api/app-router-trace/route.ts ⏰⏰⏰') span.end() resolve(new Response('Success: /api/app-router-trace')) }) })

4

Verify your backend traces are being recorded.

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