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

> SDK Next.js для ClickStack — стек обсервабилити ClickHouse

# Next.js

ClickStack может принимать нативные трассировки OpenTelemetry из ваших
[бессерверных функций Next.js](https://nextjs.org/docs/pages/building-your-application/optimizing/open-telemetry#manual-opentelemetry-configuration)
в Next 13.2+.

В этом руководстве рассматривается интеграция:

* **Логи консоли**
* **Трассировки**

<Note>
  Если вам нужно воспроизведение сеанса или мониторинг в браузере, установите вместо этого [браузерную интеграцию](/ru/clickstack/ingesting-data/sdks/browser).
</Note>

<div id="installing">
  ## Установка
</div>

<div id="enable-instrumentation-hook">
  ### Включите хук инструментирования (обязательно для v15 и ниже)
</div>

Для начала нужно включить хук инструментирования Next.js, задав `experimental.instrumentationHook = true;` в файле `next.config.js`.

**Пример:**

```javascript theme={null}
const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
  // Игнорировать предупреждения пакетов OTel 
  // 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;
```

<div id="install-sdk">
  ### Установка SDK OpenTelemetry для ClickHouse
</div>

<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>

<div id="create-instrumentation-files">
  ### Создайте файлы для инструментирования
</div>

Создайте файл с именем `instrumentation.ts` (или `.js`) в корневом каталоге проекта Next.js со следующим содержимым:

```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>', // можно настроить через переменную окружения `HYPERDX_API_KEY`
      service: '<MY_SERVICE_NAME>', // можно настроить через переменную окружения `OTEL_SERVICE_NAME`
      additionalInstrumentations: [], // опционально, по умолчанию: []
    });
  }
}
```

Это позволит Next.js импортировать инструментирование OpenTelemetry при любом вызове бессерверной функции.

<div id="configure-environment-variables">
  ### Настройка переменных окружения
</div>

Если вы отправляете трассировки напрямую в ClickStack через OpenTelemetry, запустите сервер Next.js
со следующими переменными окружения, чтобы отправлять спаны в OTel collector:

<Tabs>
  <Tab title="Управляемый 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 с открытым исходным кодом">
    ```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>

Если вы разворачиваете приложение в Vercel, убедитесь, что все перечисленные выше переменные окружения настроены
для вашего развертывания.