Skip to content
ClickHouse Docs
ClickHouse DocsClickHouse Docs
49.6kGet Started

Next.js

View as MarkdownEdit this pageReport an issueSet up docs MCP

ClickStack は、Next 13.2+ の Next.js serverless functions からネイティブな OpenTelemetry トレースを取り込めます。

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

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

インストール

インストルメンテーション フックを有効にする (v15 以下では必須)

まず、next.config.js で experimental.instrumentationHook = true; を設定して、Next.js のインストルメンテーション フックを有効にする必要があります。

例:

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;

ClickHouse OpenTelemetry SDK のインストール

npm install @hyperdx/node-opentelemetry

インストルメンテーション用ファイルを作成する

Next.js プロジェクトのルートに、次の内容で instrumentation.ts (または .js) という名前のファイルを作成します。

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 のインストルメンテーションをインポートできるようになります。

環境変数を設定する

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

OTEL_SERVICE_NAME=<MY_SERVICE_NAME> \
OTEL_EXPORTER_OTLP_ENDPOINT=http://your-otel-collector:4318
npm run dev

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

Navigation