> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-8a08bda2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Next.js SDK for ClickStack - The ClickHouse Observability Stack

# Next.js

ClickStack can ingest native OpenTelemetry traces from your
[Next.js serverless functions](https://nextjs.org/docs/pages/building-your-application/optimizing/open-telemetry#manual-opentelemetry-configuration)
in Next 13.2+.

This Guide Integrates:

* **Console Logs**
* **Traces**

<Note>
  If you're looking for session replay/browser-side monitoring, you'll want to install the [Browser integration](/clickstack/ingesting-data/sdks/browser) instead.
</Note>

<h2 id="installing">
  Installing
</h2>

<h3 id="enable-instrumentation-hook">
  Enable instrumentation hook (required for v15 and below)
</h3>

To get started, you'll need to enable the Next.js instrumentation hook by setting `experimental.instrumentationHook = true;` in your `next.config.js`.

**Example:**

```javascript theme={null}
const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
  // Ignore otel pkgs warnings 
  // https://github.com/open-telemetry/opentelemetry-js/issues/4173#issuecomment-1822938936
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
  ) => {
    if (isServer) {
      config.ignoreWarnings = [{ module: /opentelemetry/ }];
    }
    return config;
  },
};

module.exports = nextConfig;
```

<h3 id="install-sdk">
  Install ClickHouse OpenTelemetry SDK
</h3>

<Tabs>
  <Tab title="NPM">
    ```shell theme={null}
    npm install @hyperdx/node-opentelemetry 
    ```
  </Tab>

  <Tab title="Yarn">
    ```shell theme={null}
    yarn add @hyperdx/node-opentelemetry 
    ```
  </Tab>
</Tabs>

<h3 id="create-instrumentation-files">
  Create instrumentation files
</h3>

Create a file called `instrumentation.ts` (or `.js`) in your Next.js project root with the following contents:

```javascript theme={null}
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { init } = await import('@hyperdx/node-opentelemetry');
    init({
      apiKey: '<YOUR_INGESTION_API_KEY>', // optionally configure via `HYPERDX_API_KEY` env var
      service: '<MY_SERVICE_NAME>', // optionally configure via `OTEL_SERVICE_NAME` env var
      additionalInstrumentations: [], // optional, default: []
    });
  }
}
```

This will allow Next.js to import the OpenTelemetry instrumentation for any serverless function invocation.

<h3 id="configure-environment-variables">
  Configure environment variables
</h3>

If you're sending traces directly to ClickStack via the OpenTelemetry, you'll need to start your Next.js
server with the following environment variables to point spans towards the OTel collector:

<Tabs>
  <Tab title="Managed ClickStack">
    ```sh copy theme={null}
    OTEL_SERVICE_NAME=<MY_SERVICE_NAME> \
    OTEL_EXPORTER_OTLP_ENDPOINT=http://your-otel-collector:4318
    npm run dev
    ```
  </Tab>

  <Tab title="ClickStack Open Source">
    ```sh copy theme={null}
    HYPERDX_API_KEY=<YOUR_INGESTION_API_KEY> \
    OTEL_SERVICE_NAME=<MY_SERVICE_NAME> \
    OTEL_EXPORTER_OTLP_ENDPOINT=http://your-otel-collector:4318
    npm run dev
    ```
  </Tab>
</Tabs>

If you're deploying in Vercel, ensure that all the environment variables above are configured
for your deployment.