トラブルシューティング

Cloudflare を使用して、フルスタック (SSR) Next.js アプリの問題をトラブルシューティングする方法について詳しく学びましょう。

エッジランタイム

Next.js プロジェクトのすべてのサーバーサイドルートを Edge runtime ↗ ルートとして構成する必要があります。各ルートに次のように追加します::

export const runtime = "edge";

ノート

まだ Next.js Pages router ↗ を使用している場合、ページルートには 'edge' の代わりに 'experimental-edge' を使用する必要があります。

---

アプリルーター

見つかりません

Next.js は、ビルドプロセス中にアプリケーションのために not-found ルートを自動的に生成します。特定の状況下では、Next.js はルートがサーバーサイドロジックを必要とすることを検出でき（特にルートレイアウトコンポーネントで計算が行われている場合）、Next.js は Cloudflare Pages と互換性のない Node.js ランタイムサーバーレス関数 ↗ を自動的に作成します。

これを防ぐために、エッジランタイムを明示的に使用するカスタム not-found ルートを提供できます：

export const runtime = 'edge'

export default async function NotFound() {
    // ...
    return (
        // ...
    )
}

generateStaticParams

/app ディレクトリ ↗ で 静的サイト生成 (SSG) ↗ を使用し、さらに generateStaticParams ↗ 関数を使用する場合、Next.js は非静的生成ルートのリクエストを自動的に処理しようとし、Cloudflare Pages と互換性のない Node.js ランタイムサーバーレス関数 ↗ を作成します。

この動作を無効にするには、dynamicParams ↗ を false に設定します：

 export const dynamicParams = false

// ...

トップレベル getRequestContext

ルートを処理する関数内で getRequestContext を呼び出す必要があります — グローバルスコープでは呼び出せません。

これを行わないでください：

import { getRequestContext } from '@cloudflare/next-on-pages'

export const runtime = 'edge'

const myVariable = getRequestContext().env.MY_VARIABLE

export async function GET(request) {
  return new Response(myVariable)
}

代わりに、これを行ってください：

import { getRequestContext } from '@cloudflare/next-on-pages'

export const runtime = 'edge'

export async function GET(request) {
  const myVariable = getRequestContext().env.MY_VARIABLE
  return new Response(myVariable)
}

---

ページルーター

getStaticPaths

/pages ディレクトリ ↗ で 静的サイト生成 (SSG) ↗ を使用し、さらに getStaticPaths ↗ 関数を使用する場合、Next.js はデフォルトで非静的生成ルートのリクエストを自動的に処理しようとし、Cloudflare Pages と互換性のない Node.js ランタイムサーバーレス関数 ↗ を作成します。

この動作を無効にするには、false fallback ↗ を指定します：

// ...

export async function getStaticPaths() {
    // ...

    return {
        paths,
       fallback: false,
  }
}

注意

paths 配列は空であってはならないことに注意してください。空の paths 配列は、Next.js が提供された fallback 値を無視する原因となります。