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

> ClickStack 向け Next.js SDK - ClickHouse オブザーバビリティ スタック

# Next.js

ClickStack は、Next 13.2+ の
[Next.js serverless functions](https://nextjs.org/docs/pages/building-your-application/optimizing/open-telemetry#manual-opentelemetry-configuration)
からネイティブな OpenTelemetry トレースを取り込めます。

このガイドで統合するもの:

* **コンソールログ**
* **トレース**

<Note>
  セッションリプレイやブラウザー側の監視が必要な場合は、代わりに [Browser インテグレーション](/ja/clickstack/ingesting-data/sdks/browser) をインストールしてください。
</Note>

<div id="installing">
  ## インストール
</div>

<div id="enable-instrumentation-hook">
  ### インストルメンテーション フックを有効にする (v15 以下では必須)
</div>

まず、`next.config.js` で `experimental.instrumentationHook = true;` を設定して、Next.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">
  ### ClickHouse OpenTelemetry SDK のインストール
</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>

Next.js プロジェクトのルートに、次の内容で `instrumentation.ts` (または `.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>

OpenTelemetry 経由でトレースを ClickStack に直接送信する場合は、スパンの送信先が OTel collector になるように、以下の環境変数を設定して Next.js
サーバーを起動する必要があります。

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

Vercel にデプロイする場合は、上記のすべての環境変数が
そのデプロイメントに設定されていることを確認してください。