> ## Documentation Index
> Fetch the complete documentation index at: https://docs.infrastack.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Integrate OpenTelemetry for Next.js with infrastack.ai
> Learn how to instrument your Next.js application with infrastack.ai and OpenTelemetry for comprehensive observability and performance insights.
export const VercelIcon = ({size = "24"}) => ;
export const RenderIcon = ({size = "24"}) => ;
export const JsIcon = ({size = "24"}) => ;
export const GithubIcon = ({size = "24"}) => ;
export const DockerIcon = ({size = "24"}) => ;
#### What you will learn
* How to set up your environment
* How to **instrument** your application using the infrastack.ai SDK or the official OpenTelemetry SDK
#### Prerequisites
* An [infrastack.ai](https://app.infrastack.ai) account to get your API key
* A Next.js application
} />
### Getting started
You can use the Infrastack SDK to instrument your Next.js application with a single line of code.
```bash npm theme={null}
npm install @infrastack/otel
```
```bash yarn theme={null}
yarn add @infrastack/otel
```
```bash pnpm theme={null}
pnpm add @infrastack/otel
```
Create an `.env` file in the root of your project and add your API key.
```properties .env theme={null}
INFRASTACK_API_KEY=sk-1*************************f5af
```
This is step is required in order to enable instrumentation. Right now, `instrumentationHook` and `serverComponentsExternalPackages` are expermiental. Please follow the [Official Next.js Documentation for instrumentationHook](https://nextjs.org/docs/app/api-reference/next-config-js/instrumentationHook) if this document is outdated.
```javascript next.config.mjs theme={null}
const nextConfig = {
experimental: {
instrumentationHook: true, // To enable instrumentation
},
};
export default nextConfig;
```
If you are using a `src` folder in your Next.js application, create an `instrumentation.ts` file there. If not, create the file in the root of your project.
```javascript instrumentation.ts theme={null}
import { Infrastack, Protocol } from "@infrastack/otel";
export async function register() {
Infrastack.init({
serviceName: "YOUR_SERVICE_NAME",
protocol: Protocol.HTTP, // Recommended for Vercel
});
}
```
If you don't provide a service name, we will create a random name for you.
Run your Next.js application with the default command.
```bash theme={null}
npm run dev
```
You can check your data from the [infrastack.ai](https://app.infrastack.ai) dashboard.
You can use the [OpenTelemetry Javascript SDK](https://opentelemetry.io/docs/languages/js/) to instrument your Next.js application.
```bash npm theme={null}
npm install @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/sdk-trace-node
npm install @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-otlp-grpc
npm install @opentelemetry/resources @opentelemetry/semantic-conventions
```
```bash yarn theme={null}
yarn add @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/sdk-trace-node
yarn add @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-otlp-grpc
yarn add @opentelemetry/resources @opentelemetry/semantic-conventions
```
```bash pnpm theme={null}
pnpm add @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/sdk-trace-node
pnpm add @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-otlp-grpc
pnpm add @opentelemetry/resources @opentelemetry/semantic-conventions
```
```properties .env theme={null}
OTEL_EXPORTER_OTLP_ENDPOINT="https://collector.infrastack.ai"
OTEL_EXPORTER_OTLP_HEADERS="infrastack-api-key={{YOUR_INFRASTACK_API_KEY}}"
```
This is step is required in order to enable instrumentation. Right now, `instrumentationHook` and `serverComponentsExternalPackages` are experimental. Please follow the [Official Next.js Documentation for instrumentationHook](https://nextjs.org/docs/app/api-reference/next-config-js/instrumentationHook) if this document is outdated.
```javascript next.config.mjs theme={null}
const nextConfig = {
experimental: {
instrumentationHook: true, // To enable instrumentation
serverComponentsExternalPackages: [ // To utilize node.js specific features in a next.js environment
"@opentelemetry/auto-instrumentations-node",
"@opentelemetry/sdk-node",
],
},
};
export default nextConfig;
```
Here, you will create a file that will be used to instrument your application. You will have lower level control over the instrumentation process.
```javascript instrumentation-node.ts theme={null}
'use strict'
import { NodeSDK } from '@opentelemetry/sdk-node';
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-grpc';
import { ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION } from '@opentelemetry/semantic-conventions';
import { Resource } from '@opentelemetry/resources';
const traceExporter = new OTLPTraceExporter();
const sdk = new NodeSDK({
resource: new Resource({
[ATTR_SERVICE_NAME]: "{{YOUR_SERVICE_NAME}}",
[ATTR_SERVICE_VERSION]: "{{YOUR_SERVICE_VERSION}}",
}),
traceExporter,
instrumentations: [
getNodeAutoInstrumentations({
'@opentelemetry/instrumentation-fs': {
requireParentSpan: true,
},
})
],
});
sdk.start();
```
If you are using a `src` folder in your Next.js application, create an `instrumentation.ts` file there. If not, create the file in the root of your project.
```javascript instrumentation.ts theme={null}
export async function register() {
if (process.env.NEXT_RUNTIME === "nodejs") {
await import('./instrumentation-node');
}
}
```
Run your Next.js application with the default command.
```bash theme={null}
npm run dev
```
You can check your data from the [infrastack.ai](https://app.infrastack.ai) dashboard.
### Next steps
} />
} />
} />
} />
} />