NextJS

Appear offers two methods to integrate with NextJS based on serverless or self-hosted use cases.

Hosted on Vercel and other serverless platforms

When Next.js is hosted on Vercel and other serverless platforms, it has a suboptimal way to instrument API routes, which prevents us to properly detect traffic. Even the instrumentation.ts doesn't fully work with OpenTelemetry as expected.

In these scenarios please follow Custom Integration guide to create a wrapper around API route handlers.

---

Self-hosted as service

If you're self-hosting NextJS you can use next start to get going.

Installation guide

1

Install using your favourite package manager

npm i @appear.sh/introspector // or
yarn add @appear.sh/introspector // or
pnpm add @appear.sh/introspector

2

Initialise Appear in your app startup

Create theappear.js file with the following code:

appear.js

import { registerAppear } from "@appear.sh/introspector/node"

registerAppear({
  apiKey: process.env.APPEAR_REPORTING_KEY,
  environment: process.env.NODE_ENV,
  serviceName: "User Service", // name of the service you're instrumenting (optional)
})

3

Update your start script

Update your start script and pass NODE_OPTIONS variable to register appear hook.

This ensures the Appear agent is loaded first, which is best practice for instrumentation agents.

"scripts": {
  "start": "NODE_OPTIONS='--import ./appear.js' next start"
}

4

Log into Appear to view entries

The introspector will begin reporting the structure of your API services when they're interacted with. Log into Appear with your credentials to view the services that appear. You may need to refresh the page periodically.

---

We're actively working on improving how Appear works with NextJS. If you have any queries or require support with the above instructions, please contact us.