跳到主要内容

Edge Runtime

Next.js 有两个服务器运行时，你可以在应用程序中使用：

  • Node.js 运行时（默认），可以访问所有 Node.js API，用于渲染应用程序。
  • Edge 运行时，包含更有限的 API 集合，用于中间件。

注意事项

  • Edge 运行时不支持所有 Node.js API。某些包可能无法按预期工作。
  • Edge 运行时不支持增量静态再生成（ISR）。
  • 两个运行时都可以支持流式渲染，具体取决于你的部署适配器。

参考

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 | 提供对常见加密原语的访问，如哈希、签名、加密或解密 |

Web 标准 API

| API | 描述 | | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | AbortController | 允许你根据需要中止一个或多个 DOM 请求 | | Array | 表示值的数组 | | ArrayBuffer | 表示一个通用的、固定长度的原始二进制数据缓冲区 | | Atomics | 提供原子操作作为静态方法 | | BigInt | 表示具有任意精度的整数 | | BigInt64Array | 表示 64 位有符号整数的类型化数组 | | BigUint64Array | 表示 64 位无符号整数的类型化数组 | | Boolean | 表示一个逻辑实体，可以有两个值：true 和 false | | 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 dev 和 next build 的环境变量。

不支持的 API

Edge 运行时有一些限制，包括：

  • 原生 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 上执行，它们将抛出并导致运行时错误。

最后于 更新