Edge Runtime (エッジランタイム)

Next.js ではアプリケーションで使用できる2つのサーバーランタイムを提供しています:

  • Node.js ランタイム (デフォルト): すべての Node.js API にアクセス可能で、アプリケーションのレンダリングに使用されます
  • Edge ランタイム: より限定された API セット を含み、Middleware で使用されます

注意事項

  • Edge ランタイムはすべての Node.js API をサポートしていません。一部のパッケージは期待通りに動作しない可能性があります
  • Edge ランタイムは 静的生成の増分更新 (ISR) をサポートしていません
  • 両方のランタイムはデプロイアダプターに応じて ストリーミング をサポートできます

リファレンス

Edge ランタイムでサポートされている API:

ネットワーク API

API説明
BlobBlob を表現
fetchリソースを取得
FetchEventフェッチイベントを表現
Fileファイルを表現
FormDataフォームデータを表現
HeadersHTTP ヘッダーを表現
RequestHTTP リクエストを表現
ResponseHTTP レスポンスを表現
URLSearchParamsURL 検索パラメータを表現
WebSocketWebSocket 接続を表現

エンコーディング API

API説明
atobbase-64 エンコード文字列をデコード
btoa文字列を base-64 エンコード
TextDecoderUint8Array を文字列にデコード
TextDecoderStreamストリーム用チェーン可能デコーダー
TextEncoder文字列を Uint8Array にエンコード
TextEncoderStreamストリーム用チェーン可能エンコーダー

ストリーム API

API説明
ReadableStream読み取り可能なストリームを表現
ReadableStreamBYOBReaderReadableStream のリーダーを表現
ReadableStreamDefaultReaderReadableStream のリーダーを表現
TransformStream変換ストリームを表現
WritableStream書き込み可能なストリームを表現
WritableStreamDefaultWriterWritableStream のライターを表現

暗号 API

API説明
cryptoプラットフォームの暗号機能にアクセス
CryptoKey暗号鍵を表現
SubtleCryptoハッシュ、署名、暗号化/復号化などの一般的な暗号プリミティブにアクセス

Web標準API

API説明
AbortController1つ以上のDOMリクエストを任意のタイミングで中止できるようにする
Array値の配列を表す
ArrayBuffer汎用的な固定長の生バイナリデータバッファを表す
Atomicsアトミック操作を静的メソッドとして提供する
BigInt任意精度の整数を表す
BigInt64Array64ビット符号付き整数の型付き配列を表す
BigUint64Array64ビット符号なし整数の型付き配列を表す
Boolean論理値を表し、truefalseの2つの値を持つ
clearIntervalsetInterval()で設定された繰り返し処理をキャンセルする
clearTimeoutsetTimeout()で設定された遅延処理をキャンセルする
consoleブラウザのデバッグコンソールへのアクセスを提供する
DataViewArrayBufferの汎用ビューを表す
Dateプラットフォームに依存しない形式で単一の時点を表す
decodeURIencodeURIまたは類似のルーチンで作成されたURIをデコードする
decodeURIComponentencodeURIComponentまたは類似のルーチンで作成されたURIコンポーネントをデコードする
DOMExceptionDOMで発生するエラーを表す
encodeURI特定の文字をUTF-8エンコーディングを表す1~4つのエスケープシーケンスに置き換えてURIをエンコードする
encodeURIComponent特定の文字をUTF-8エンコーディングを表す1~4つのエスケープシーケンスに置き換えてURIコンポーネントをエンコードする
Errorステートメントの実行やプロパティへのアクセス時に発生するエラーを表す
EvalErrorグローバル関数eval()に関連するエラーを表す
Float32Array32ビット浮動小数点数の型付き配列を表す
Float64Array64ビット浮動小数点数の型付き配列を表す
Function関数を表す
Infinity数学的な無限大の値を表す
Int8Array8ビット符号付き整数の型付き配列を表す
Int16Array16ビット符号付き整数の型付き配列を表す
Int32Array32ビット符号付き整数の型付き配列を表す
Intl国際化(i18n)とローカライゼーション機能へのアクセスを提供する
isFinite値が有限数かどうかを判定する
isNaN値がNaNかどうかを判定する
JSONJavaScriptの値とJSON形式の相互変換機能を提供する
Map各値が一度しか出現しない値のコレクションを表す
Math数学関数と定数へのアクセスを提供する
Number数値を表す
ObjectすべてのJavaScriptオブジェクトの基底となるオブジェクトを表す
parseFloat文字列引数を解析して浮動小数点数を返す
parseInt文字列引数を解析して指定された基数の整数を返す
Promise非同期操作の最終的な完了(または失敗)とその結果の値を表す
Proxy基本的な操作(プロパティ検索、代入、列挙、関数呼び出しなど)のカスタム動作を定義するために使用されるオブジェクトを表す
queueMicrotask実行するマイクロタスクをキューに入れる
RangeError値が許可された値のセットまたは範囲にない場合のエラーを表す
ReferenceError存在しない変数が参照された場合のエラーを表す
Reflectインターセプト可能なJavaScript操作のメソッドを提供する
RegExp文字の組み合わせをマッチさせる正規表現を表す
Set各値が一度しか出現しない値のコレクションを表す
setInterval一定の時間間隔で関数を繰り返し呼び出す
setTimeout指定したミリ秒数後に関数を呼び出すまたは式を評価する
SharedArrayBuffer汎用的な固定長の生バイナリデータバッファを表す
String文字のシーケンスを表す
structuredClone値のディープコピーを作成する
Symbolオブジェクトプロパティのキーとして使用される一意で不変のデータ型を表す
SyntaxError構文的に無効なコードを解釈しようとした場合のエラーを表す
TypeError値が期待される型ではない場合のエラーを表す
Uint8Array8ビット符号なし整数の型付き配列を表す
Uint8ClampedArray0-255にクランプされた8ビット符号なし整数の型付き配列を表す
Uint32Array32ビット符号なし整数の型付き配列を表す
URIErrorグローバルURI処理関数が誤った方法で使用された場合のエラーを表す
URLオブジェクトURLを作成するための静的メソッドを提供するオブジェクトを表す
URLPatternURLパターンを表す
URLSearchParamsキー/値ペアのコレクションを表す
WeakMapキーが弱参照されるキー/値ペアのコレクションを表す
WeakSet各オブジェクトが一度しか出現しないオブジェクトのコレクションを表す
WebAssemblyWebAssemblyへのアクセスを提供する

Next.js 固有のポリフィル

環境変数

next devnext build の両方で 環境変数 にアクセスするために process.env を使用できます。

サポートされていない API

Edge Runtime には以下のような制限があります:

  • ネイティブの Node.js API はサポートされていません。例えば、ファイルシステムの読み書きはできません。
  • node_modules は、ES モジュールを実装しており、ネイティブの Node.js API を使用していない限り使用可能です。
  • require の直接呼び出しは許可されていません。代わりに ES モジュールを使用してください。

以下の JavaScript の言語機能は無効化されており、動作しません:

API説明
eval文字列として表現された JavaScript コードを評価する
new Function(evalString)引数として提供されたコードで新しい関数を作成する
WebAssembly.compileバッファソースから WebAssembly モジュールをコンパイルする
WebAssembly.instantiateバッファソースから WebAssembly モジュールをコンパイルしインスタンス化する

まれなケースとして、コードに(またはインポートしたモジュールに)ランタイム時に到達できない動的コード評価文が含まれており、ツリーシェイキングで除去できない場合があります。 Middleware 設定で特定のファイルを許可するようにチェックを緩和できます:

middleware.ts
export const config = {
  unstable_allowDynamic: [
    // 単一のファイルを許可
    '/lib/utilities.js',
    // サードパーティモジュール function-bind 内のすべてを許可するためにグロブを使用
    '**/node_modules/function-bind/**',
  ],
}

unstable_allowDynamicグロブ、またはグロブの配列で、特定のファイルに対する動的コード評価を無視します。グロブはアプリケーションのルートフォルダからの相対パスです。

これらの文が Edge で実行された場合、エラーがスローされランタイムエラーを引き起こすことに注意してください。