Backend: Error Monitoring
Backend: Logging
Go
JS
Python
Ruby
Java
Rust
Hosting Providers
Backend: Tracing
Native OpenTelemetry
Fullstack Frameworks
Overview
Self Host & Local Dev
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
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.7779082828705284`)
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.