Edge Runtime

Next.js 提供兩種伺服器運行時 (runtime) 供您的應用程式使用:

  • Node.js 運行時 (預設):可存取所有 Node.js API,用於渲染您的應用程式
  • Edge 運行時:包含較為有限的 API 集合,用於 中介軟體 (Middleware)

注意事項

  • Edge 運行時不支援所有 Node.js API,某些套件可能無法正常運作
  • Edge 運行時不支援增量靜態再生 (ISR)
  • 兩種運行時均可支援 串流 (streaming),具體取決於您的部署適配器

API 參考

Edge 運行時支援以下 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 的寫入器

加密 API

API說明
crypto提供平台加密功能的存取權限
CryptoKey表示加密金鑰
SubtleCrypto提供常見加密原語的存取權限,如雜湊、簽署、加密或解密

網頁標準 API

API描述
AbortController允許您根據需求中止一個或多個 DOM 請求
Array表示一組值的陣列
ArrayBuffer表示一個通用的、固定長度的原始二進位資料緩衝區
Atomics提供原子操作作為靜態方法
BigInt表示具有任意精度的整數
BigInt64Array表示一個 64 位元有號整數的型別陣列
BigUint64Array表示一個 64 位元無號整數的型別陣列
Boolean表示一個邏輯實體,可以有兩個值:truefalse
clearInterval取消先前透過 setInterval() 設定的定時重複動作
clearTimeout取消先前透過 setTimeout() 設定的定時重複動作
console提供對瀏覽器除錯主控台的存取
DataView表示 ArrayBuffer 的通用視圖
Date以平台無關的格式表示單一時間點
decodeURI解碼先前由 encodeURI 或類似方法建立的統一資源識別符 (URI)
decodeURIComponent解碼先前由 encodeURIComponent 或類似方法建立的統一資源識別符 (URI) 元件
DOMException表示 DOM 中發生的錯誤
encodeURI透過將特定字元的每個實例替換為代表該字元 UTF-8 編碼的一到四個跳脫序列,來編碼統一資源識別符 (URI)
encodeURIComponent透過將特定字元的每個實例替換為代表該字元 UTF-8 編碼的一到四個跳脫序列,來編碼統一資源識別符 (URI) 元件
Error表示嘗試執行語句或存取屬性時發生的錯誤
EvalError表示與全域函式 eval() 相關的錯誤
Float32Array表示一個 32 位元浮點數的型別陣列
Float64Array表示一個 64 位元浮點數的型別陣列
Function表示一個函式
Infinity表示數學上的無限大值
Int8Array表示一個 8 位元有號整數的型別陣列
Int16Array表示一個 16 位元有號整數的型別陣列
Int32Array表示一個 32 位元有號整數的型別陣列
Intl提供對國際化和本地化功能的存取
isFinite判斷一個值是否為有限數字
isNaN判斷一個值是否為 NaN
JSON提供將 JavaScript 值與 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表示當值的類型不符合預期時發生的錯誤
Uint8Array表示一個 8 位元無號整數的型別陣列
Uint8ClampedArray表示一個被限制在 0-255 範圍內的 8 位元無號整數型別陣列
Uint32Array表示一個 32 位元無號整數的型別陣列
URIError表示以錯誤方式使用全域 URI 處理函式時發生的錯誤
URL表示提供用於建立物件 URL 的靜態方法的物件
URLPattern表示一個 URL 模式
URLSearchParams表示一組鍵/值對的集合
WeakMap表示一組鍵/值對的集合,其中鍵是弱引用
WeakSet表示一組物件的集合,其中每個物件只能出現一次
WebAssembly提供對 WebAssembly 的存取

Next.js 專用 Polyfills

環境變數

你可以使用 process.env 來存取環境變數,適用於 next devnext build 兩種情境。

不支援的 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 模組

在極少數情況下,你的程式碼可能包含 (或引入) 一些動態程式碼評估語句,這些語句在執行時 無法被觸及 且無法透過 tree shaking 移除。
你可以透過中介軟體配置放寬檢查,允許特定檔案:

middleware.ts
export const config = {
  unstable_allowDynamic: [
    // 允許單一檔案
    '/lib/utilities.js',
    // 使用 glob 模式允許第三方模組 function-bind 中的所有內容
    '**/node_modules/function-bind/**',
  ],
}

unstable_allowDynamic 是一個 glob 或 glob 陣列,用於忽略特定檔案的動態程式碼評估。這些 glob 是相對於你的應用程式根目錄。

請注意,如果這些語句在 Edge 環境中執行,它們將會拋出錯誤並導致執行時錯誤

On this page