Edge Runtime
Next.js には、アプリケーションで使用できる 2 つのサーバーランタイムがあります。
- Node.js ランタイム (デフォルト) は、すべての 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 | 必要に応じて 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 | 数値(numeric value)を表します |
Object | すべての JavaScript オブジェクトの基盤となるオブジェクトを表します |
parseFloat | 文字列引数を解析し、浮動小数点数を返します |
parseInt | 文字列引数を解析し、指定された基数(radix)の整数を返します |
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 で実行された場合、エラーが発生し、実行時エラーを引き起こすことに注意してください。
役に立ちましたか?