エッジランタイム
Next.js には、アプリケーションで使用できる 2 つのサーバーランタイムがあります。
- Node.js Runtime(デフォルト)。すべての Node.js API にアクセスでき、アプリケーションのレンダリングに使用されます。
- Edge Runtime。より限定されたAPI セットを含み、Proxyで使用されます。
注意事項
- Edge Runtime はすべての Node.js API をサポートしていません。一部のパッケージは期待通りに動作しない可能性があります。
- Edge Runtime は Incremental Static Regeneration(ISR)をサポートしていません。
- 両方のランタイムはデプロイアダプタに応じてストリーミングをサポートできます。
リファレンス
Edge Runtime は以下の API をサポートしています。
ネットワーク API
| API | 説明 |
|---|---|
Blob | Blob を表します |
fetch | リソースをフェッチします |
FetchEvent | fetch イベントを表します |
File | ファイルを表します |
FormData | フォームデータを表します |
Headers | HTTP ヘッダーを表します |
Request | HTTP リクエストを表します |
Response | HTTP レスポンスを表します |
URLSearchParams | URL 検索パラメータを表します |
WebSocket | WebSocket 接続を表します |
エンコーディング API
| API | 説明 |
|---|---|
atob | Base-64 でエンコードされた文字列をデコードします |
btoa | 文字列を Base-64 でエンコードします |
TextDecoder | Uint8Array を文字列にデコードします |
TextDecoderStream | ストリーム用のチェーン可能なデコーダー |
TextEncoder | 文字列を Uint8Array にエンコードします |
TextEncoderStream | ストリーム用のチェーン可能なエンコーダー |
ストリーム API
| API | 説明 |
|---|---|
ReadableStream | 読み込み可能なストリームを表します |
ReadableStreamBYOBReader | ReadableStream のリーダーを表します |
ReadableStreamDefaultReader | ReadableStream のリーダーを表します |
TransformStream | トランスフォームストリームを表します |
WritableStream | 書き込み可能なストリームを表します |
WritableStreamDefaultWriter | WritableStream のライターを表します |
Crypto API
| API | 説明 |
|---|---|
crypto | プラットフォームの暗号化機能へのアクセスを提供します |
CryptoKey | 暗号化キーを表します |
SubtleCrypto | ハッシング、署名、暗号化、復号化などの一般的な暗号化プリミティブへのアクセスを提供します |
Web 標準 API
| API | 説明 |
|---|---|
AbortController | 1 つ以上の DOM リクエストを必要に応じて中止できます |
Array | 値の配列を表します |
ArrayBuffer | 汎用の固定長の生のバイナリデータバッファを表します |
Atomics | アトミック操作を静的メソッドとして提供します |
BigInt | 任意の精度を持つ整数を表します |
BigInt64Array | 64 ビット符号付き整数の型付き配列を表します |
BigUint64Array | 64 ビット符号なし整数の型付き配列を表します |
Boolean | 論理値を表し、true または false のいずれかの値を持ちます |
clearInterval | setInterval() の呼び出しで以前に設定された時間指定の繰り返し動作をキャンセルします |
clearTimeout | setTimeout() の呼び出しで以前に設定された時間指定の繰り返し動作をキャンセルします |
console | ブラウザのデバッグコンソールへのアクセスを提供します |
DataView | ArrayBuffer の汎用ビューを表します |
Date | プラットフォーム非依存の形式で単一の時点を表します |
decodeURI | encodeURI またはこれに類するルーチンで作成された URI(Uniform Resource Identifier)をデコードします |
decodeURIComponent | encodeURIComponent またはこれに類するルーチンで作成された URI コンポーネントをデコードします |
DOMException | DOM で発生するエラーを表します |
encodeURI | URI の各文字のインスタンスを、その UTF-8 エンコーディングを表す 1 つ、2 つ、3 つ、または 4 つのエスケープシーケンスに置き換えて、URI をエンコードします |
encodeURIComponent | URI コンポーネントの各文字のインスタンスを、その UTF-8 エンコーディングを表す 1 つ、2 つ、3 つ、または 4 つのエスケープシーケンスに置き換えて、URI コンポーネントをエンコードします |
Error | ステートメントの実行またはプロパティへのアクセス時に発生するエラーを表します |
EvalError | グローバル関数 eval() に関して発生するエラーを表します |
Float32Array | 32 ビット浮動小数点数の型付き配列を表します |
Float64Array | 64 ビット浮動小数点数の型付き配列を表します |
Function | 関数を表します |
Infinity | 数学的無大値を表します |
Int8Array | 8 ビット符号付き整数の型付き配列を表します |
Int16Array | 16 ビット符号付き整数の型付き配列を表します |
Int32Array | 32 ビット符号付き整数の型付き配列を表します |
Intl | 国際化とローカライゼーション機能へのアクセスを提供します |
isFinite | 値が有限数かどうかを判定します |
isNaN | 値が NaN であるかどうかを判定します |
JSON | JavaScript の値を JSON 形式に、または 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: [
// 単一のファイルを許可します
'/lib/utilities.js',
// グロブを使用して function-bind サードパーティモジュール内のすべてを許可します
'**/node_modules/function-bind/**',
],
}unstable_allowDynamic はグロブ、またはグロブの配列で、特定のファイルの動的コード評価を無視します。グロブはアプリケーションルートフォルダを基準に相対的です。
Edge で実行されるこれらのステートメントは、_エラーをスローしてランタイムエラーが発生する_可能性があることに注意してください。