Next.js統合
Next.js に Zenovay を追加する
最適なローディングのために組み込みの Script コンポーネントを使用します。App Router と Pages Router に対応。2分以内でセットアップ完了。
無料で始めるApp Router のセットアップ
Next.js 13+ プロジェクトに推奨
Zenovay にサインアップ
auth.zenovay.com で無料の Zenovay アカウントを作成してください。
トラッキングスクリプトをコピー
Zenovay ダッシュボードの「設定」に移動し、ドメイン固有のトラッキング詳細をコピーしてください。
レイアウトに Script コンポーネントを追加
next/script から Script をインポートし、ルートの layout.tsx（App Router）または _app.tsx（Pages Router）に追加してください。
インストールを確認
npm run dev を実行してサイトにアクセスし、Zenovay ダッシュボードを確認してください。数秒以内にデータが表示されるはずです。
Next.js 開発者が Zenovay を選ぶ理由
SPA ルートトラッキング
Zenovay はクライアントサイドナビゲーションを自動的に追跡します。Router の統合や手動のページビュー呼び出しは不要です。
完璧な Lighthouse スコア
afterInteractive ローディングで25 KB 未満のスクリプト。Next.js のパフォーマンス指標への影響はゼロです。
静的エクスポートに対応
Vercel、Netlify、Cloudflare Pages 向けに output: "export" を使用していますか？ Zenovay は静的ビルドで完全に動作します。
よくある質問
Script コンポーネントと通常のスクリプトタグのどちらを使用すべきですか？
最適なローディングのために strategy="afterInteractive" の Next.js Script コンポーネントを使用してください。これにより、トラッキングスクリプトはページがインタラクティブになった後に読み込まれ、パフォーマンスとデータ精度の最適なバランスが得られます。
App Router と Pages Router の両方で動作しますか？
はい。App Router の場合はルートの layout.tsx に、Pages Router の場合は _app.tsx または _document.tsx に Script コンポーネントを追加してください。どちらのアプローチも同様に動作します。
Zenovay はクライアントサイドのルート変更を追跡しますか？
はい。Zenovay は Next.js シングルページアプリケーションのクライアントサイドナビゲーションを自動的に検出します。すべてのルート変更は追加設定なしに新しいページビューとして追跡されます。
Lighthouse スコアに影響しますか？
いいえ。Zenovay スクリプトは25 KB 未満で非同期読み込みです。afterInteractive ストラテジーの Script コンポーネントを使用することで、レンダリングをブロックしたり Lighthouse パフォーマンススコアに影響することはありません。
Next.js の静的エクスポートで Zenovay を使用できますか？
はい。Zenovay は Next.js の静的エクスポート（output: "export"）で完全に動作します。トラッキングスクリプトはクライアントサイドで読み込まれ、Zenovay API と直接通信します。
その他の統合
Zenovayはあらゆるウェブサイトで動作します。プラットフォームをお選びください。