Edge Runtime
Next.js には、アプリケーションで使用できる 2 つのサーバーランタイムがあります。
- Node.js Runtime (デフォルト) は、すべての Node.js API にアクセスでき、アプリケーションのレンダリングに使用されます。
- Edge Runtime は、より限定されたAPI セットを含み、Proxy で使用されます。
注意点
- Edge Runtime は、すべての Node.js API をサポートしているわけではありません。一部のパッケージは期待どおりに動作しない場合があります。
- Edge Runtime は、増分静的再生成 (ISR) をサポートしていません。
- デプロイメントアダプターによっては、両方のランタイムでストリーミングをサポートできます。
リファレンス
Edge Runtime は、次の API をサポートしています。
ネットワーク API
| API | 説明 | 
|---|---|
| Blob | ブロブを表します。 | 
| fetch | リソースを取得します。 | 
| FetchEvent | fetch イベントを表します。 | 
| File | ファイルを表現します。 | 
| FormData | フォームデータを表します。 | 
| Headers | HTTP ヘッダーを表します。 | 
| Request | HTTP リクエストを表します。 | 
| Response | HTTP レスポンスを表します。 | 
| URLSearchParams | URL の検索パラメータを表します。 | 
| WebSocket | WebSocket 接続を表します。 | 
エンコーディング API
| API | 説明 | 
|---|---|
| atob | Base64 でエンコードされた文字列をデコードします。 | 
| btoa | 文字列を Base64 でエンコードします。 | 
| TextDecoder | Uint8Array を文字列にデコードします。 | 
| TextDecoderStream | ストリーム用の連鎖可能なデコーダー。 | 
| TextEncoder | 文字列を Uint8Array にエンコードします。 | 
| TextEncoderStream | ストリーム用の連鎖可能なエンコーダー。 | 
ストリーム API
| API | 説明 | 
|---|---|
| ReadableStream | 読み込み可能なストリームを表します。 | 
| ReadableStreamBYOBReader | ReadableStream のリーダーを表します。 | 
| ReadableStreamDefaultReader | ReadableStream のリーダーを表します。 | 
| TransformStream | 変換ストリームを表します。 | 
| WritableStream | 書き込み可能なストリームを表します。 | 
| WritableStreamDefaultWriter | WritableStream のライターを表します。 | 
暗号 API
| API | 説明 | 
|---|---|
| crypto | プラットフォームの暗号化機能へのアクセスを提供します。 | 
| CryptoKey | 暗号化キーを表します。 | 
| SubtleCrypto | ハッシュ、署名、暗号化、復号化などの一般的な暗号プリミティブへのアクセスを提供します。 | 
Web 標準 API
| API | 説明 | 
|---|---|
| AbortController | 必要に応じて、1 つ以上の DOM リクエストを中止できるようにします。 | 
| Array | 値の配列を表します。 | 
| ArrayBuffer | 固定長生の生のバイナリデータバッファを汎用的に表します。 | 
| Atomics | 静的メソッドとしてアトミック操作を提供します。 | 
| BigInt | 任意精度の整数を表します。 | 
| BigInt64Array | 64ビット符号付き整数の型配列を表します。 | 
| BigUint64Array | 64ビット符号なし整数の型配列を表します。 | 
| Boolean | 論理エンティティを表し、 trueとfalseの 2 つの値を持つことができます。 | 
| clearInterval | setInterval()の呼び出しによって以前に設定された、繰り返し実行されるタイマーアクションをキャンセルします。 | 
| clearTimeout | setTimeout()の呼び出しによって以前に設定された、繰り返し実行されるタイマーアクションをキャンセルします。 | 
| console | ブラウザのデバッグコンソールへのアクセスを提供します。 | 
| DataView | ArrayBufferの汎用ビューを表します。 | 
| Date | プラットフォームに依存しない形式で、単一の瞬間を表します。 | 
| decodeURI | encodeURIまたは同様のルーチンによって以前に作成された Uniform Resource Identifier (URI) をデコードします。 | 
| decodeURIComponent | encodeURIComponentまたは同様のルーチンによって以前に作成された Uniform Resource Identifier (URI) コンポーネントをデコードします。 | 
| DOMException | DOM で発生するエラーを表します。 | 
| encodeURI | UTF-8 エンコーディングで文字を表す 1、2、3、または 4 つのエスケープシーケンスに特定の文字の各インスタンスを置き換えることにより、Uniform Resource Identifier (URI) をエンコードします。 | 
| encodeURIComponent | UTF-8 エンコーディングで文字を表す 1、2、3、または 4 つのエスケープシーケンスに特定の文字の各インスタンスを置き換えることにより、Uniform Resource Identifier (URI) コンポーネントをエンコードします。 | 
| Error | ステートメントの実行中またはプロパティへのアクセス中に発生するエラーを表します。 | 
| EvalError | グローバル関数 eval()に関して発生するエラーを表します。 | 
| Float32Array | 32ビット浮動小数点数の型配列を表します。 | 
| Float64Array | 64ビット浮動小数点数の型配列を表します。 | 
| Function | 関数を表します。 | 
| Infinity | 数学的な無限大の値 (Infinity) を表します。 | 
| Int8Array | 8ビット符号付き整数の型配列を表します。 | 
| Int16Array | 16ビット符号付き整数の型配列を表します。 | 
| Int32Array | 32ビット符号付き整数の型配列を表します。 | 
| Intl | 国際化およびローカリゼーション機能へのアクセスを提供します。 | 
| isFinite | 値が有限数であるかどうかを判断します。 | 
| isNaN | 値が NaNであるかどうかを判断します。 | 
| JSON | JavaScript 値と JSON 形式との間で変換する機能を提供します。 | 
| Map | 各値が 1 回だけ出現する可能性のある値のコレクションを表します。 | 
| Math | 数学関数と定数へのアクセスを提供します。 | 
| Number | 数値型を表します。 | 
| Object | すべての JavaScript オブジェクトの基盤となるオブジェクトを表します。 | 
| parseFloat | 文字列引数を解析し、浮動小数点数を返します。 | 
| parseInt | 文字列引数を解析し、指定された基数の整数を返します。 | 
| Promise | 非同期操作の最終的な完了(または失敗)とその結果の値を表します。 | 
| Proxy | 基本的な操作(プロパティの検索、代入、列挙、関数呼び出しなど)のカスタム動作を定義するために使用されるオブジェクトを表します。 | 
| queueMicrotask | 実行されるマイクロタスクをキューに入れます。 | 
| RangeError | 値が許可された値のセットまたは範囲内にない場合に発生するエラーを表します。 | 
| ReferenceError | 存在しない変数が参照された場合のエラーを表します。 | 
| Reflect | インターセプト可能な JavaScript 操作のためのメソッドを提供します。 | 
| RegExp | 文字の組み合わせを照合できる正規表現を表します。 | 
| Set | 各値が 1 回だけ出現する可能性のある値のコレクションを表します。 | 
| setInterval | 指定された時間間隔で関数を繰り返し呼び出します。 | 
| setTimeout | 指定されたミリ秒数後に関数を呼び出すか、式を評価します。 | 
| SharedArrayBuffer | 固定長生の生のバイナリデータバッファを汎用的に表します。 | 
| String | 文字のシーケンスを表します。 | 
| structuredClone | 値のディープコピーを作成します。 | 
| Symbol | オブジェクトプロパティのキーとして使用される、ユニークで不変なデータ型を表します。 | 
| SyntaxError | 構文的に無効なコードを解釈しようとした場合のエラーを表します。 | 
| TypeError | 予期される型とは異なる値であった場合のエラーを表します。 | 
| Uint8Array | 8ビット符号なし整数の型配列を表します。 | 
| Uint8ClampedArray | 0-255 の範囲にクランプされた8ビット符号なし整数の型配列を表します。 | 
| Uint32Array | 32ビット符号なし整数の型配列を表します。 | 
| URIError | グローバル URI 処理関数が誤った方法で使用された場合のエラーを表します。 | 
| URL | オブジェクト URL を作成するための静的メソッドを提供するオブジェクトを表します。 | 
| URLPattern | URL パターンを表します。 | 
| URLSearchParams | キーと値のペアのコレクションを表します。 | 
| WeakMap | キーが弱く参照されているキー/値ペアのコレクションを表します。 | 
| WeakSet | 各オブジェクトが 1 回だけ出現する可能性のあるオブジェクトのコレクションを表します。 | 
| WebAssembly | WebAssembly へのアクセスを提供します。 | 
Next.js 固有のポリフィル
環境変数
process.env を使用して、next dev と next build の両方で環境変数にアクセスできます。
サポートされていない API
Edge Runtime には、いくつかの制限があります。
- ネイティブ Node.js API はサポートされていません。たとえば、ファイルシステムの読み書きはできません。
- node_modulesは、ES Modules を実装しており、ネイティブ Node.js API を使用しない限り、使用できます。
- requireの直接呼び出しは許可されていません。代わりに ES Modules を使用してください。
次の JavaScript 言語機能は無効になっており、機能しません。
| API | 説明 | 
|---|---|
| eval | 文字列として表される JavaScript コードを評価します。 | 
| new Function(evalString) | 引数として提供されたコードで新しい関数を作成します。 | 
| WebAssembly.compile | バッファソースから WebAssembly モジュールをコンパイルします。 | 
| WebAssembly.instantiate | バッファソースから WebAssembly モジュールをコンパイルおよびインスタンス化します。 | 
まれに、コードに(またはインポートによって)動的なコード評価ステートメントが含まれている場合がありますが、これは実行時に到達できず、ツリーシェイクによって削除できないことがあります。Proxy 設定で特定のファイルに対してチェックを緩和することができます。
proxy.ts
export const config = {
  unstable_allowDynamic: [
    // allows a single file
    '/lib/utilities.js',
    // use a glob to allow anything in the function-bind 3rd party module
    '**/node_modules/function-bind/**',
  ],
}unstable_allowDynamic は、glob(または glob の配列)であり、特定のファイルに対する動的なコード評価を無視します。glob はアプリケーションのルートフォルダからの相対パスです。
これらのステートメントが Edge で実行された場合、エラーが発生し、実行時エラーを引き起こすことに注意してください。
役に立ちましたか?