🎉 공식문서 번역에 참여해주세요.  🐙  Github 바로가기  🐙
Docs
App Router
API Reference
Edge Runtime

Edge Runtime

Next.js Edge Runtime은 미들웨어에 사용되며 다음 API들을 지원합니다:

Network APIs

API설명
Blob (opens in a new tab)블롭을 나타냄
fetch (opens in a new tab)리소스를 가져옴
FetchEvent (opens in a new tab)fetch 이벤트를 나타냄
File (opens in a new tab)파일을 나타냄
FormData (opens in a new tab)폼 데이터를 나타냄
Headers (opens in a new tab)HTTP 헤더를 나타냄
Request (opens in a new tab)HTTP 요청을 나타냄
Response (opens in a new tab)HTTP 응답을 나타냄
URLSearchParams (opens in a new tab)URL 검색 매개변수를 나타냄
WebSocket (opens in a new tab)웹소켓 연결을 나타냄

Encoding APIs

API설명
atob (opens in a new tab)base-64 인코딩 문자열을 디코딩
btoa (opens in a new tab)문자열을 base-64로 인코딩
TextDecoder (opens in a new tab)Uint8Array를 문자열로 디코딩
TextDecoderStream (opens in a new tab)스트림용 체이너블 디코더
TextEncoder (opens in a new tab)문자열을 Uint8Array로 인코딩
TextEncoderStream (opens in a new tab)스트림용 체이너블 인코더

Stream APIs

API설명
ReadableStream (opens in a new tab)읽기 가능한 스트림을 나타냄
ReadableStreamBYOBReader (opens in a new tab)ReadableStream의 리더를 나타냄
ReadableStreamDefaultReader (opens in a new tab)ReadableStream의 리더를 나타냄
TransformStream (opens in a new tab)변환 스트림을 나타냄
WritableStream (opens in a new tab)쓰기 가능한 스트림을 나타냄
WritableStreamDefaultWriter (opens in a new tab)WritableStream의 라이터를 나타냄

Crypto APIs

API설명
crypto (opens in a new tab)플랫폼의 암호화 기능에 접근 제공
CryptoKey (opens in a new tab)암호화 키를 나타냄
SubtleCrypto (opens in a new tab)해싱, 서명, 암호화, 복호화와 같은 일반적인 암호화 원시 기능 제공

Web Standard APIs

API설명
AbortController (opens in a new tab)DOM 요청을 원하는 대로 중단할 수 있게 함
Array (opens in a new tab)값의 배열을 나타냄
ArrayBuffer (opens in a new tab)일반 고정 길이 원시 이진 데이터 버퍼를 나타냄
Atomics (opens in a new tab)정적 메서드로 원자적 연산 제공
BigInt (opens in a new tab)임의 정밀도의 정수를 나타냄
BigInt64Array (opens in a new tab)64비트 정수의 타입 배열을 나타냄
BigUint64Array (opens in a new tab)64비트 부호 없는 정수의 타입 배열을 나타냄
Boolean (opens in a new tab)논리적 엔티티를 나타내며 두 가지 값 true 및 false를 가질 수 있음
clearInterval (opens in a new tab)setInterval() 호출로 이전에 설정된 반복 작업을 취소
clearTimeout (opens in a new tab)setTimeout() 호출로 이전에 설정된 작업을 취소
console (opens in a new tab)브라우저의 디버깅 콘솔에 접근 제공
DataView (opens in a new tab)ArrayBuffer의 일반 뷰를 나타냄
Date (opens in a new tab)플랫폼 독립적 형식으로 시간의 단일 순간을 나타냄
decodeURI (opens in a new tab)이전에 encodeURI 또는 유사한 루틴에 의해 생성된 URI(Uniform Resource Identifier)를 디코딩
decodeURIComponent (opens in a new tab)이전에 encodeURIComponent 또는 유사한 루틴에 의해 생성된 URI(Uniform Resource Identifier) 구성 요소를 디코딩
DOMException (opens in a new tab)DOM에서 발생하는 오류를 나타냄
encodeURI (opens in a new tab)특정 문자의 각 인스턴스를 해당 문자 UTF-8 인코딩을 나타내는 하나, 둘, 셋, 또는 네 개의 이스케이프 시퀀스로 대체하여 URI 인코딩
encodeURIComponent (opens in a new tab)특정 문자의 각 인스턴스를 해당 문자 UTF-8 인코딩을 나타내는 하나, 둘, 셋, 또는 네 개의 이스케이프 시퀀스로 대체하여 URI 구성 요소 인코딩
Error (opens in a new tab)문을 실행하거나 속성에 접근하려고 할 때 발생하는 오류를 나타냄
EvalError (opens in a new tab)전역 함수 eval()에 대한 오류를 나타냄
Float32Array (opens in a new tab)32비트 부동 소수점 숫자의 타입 배열을 나타냄
Float64Array (opens in a new tab)64비트 부동 소수점 숫자의 타입 배열을 나타냄
Function (opens in a new tab)함수를 나타냄
Infinity (opens in a new tab)수학적 무한대 값을 나타냄
Int8Array (opens in a new tab)8비트 정수의 타입 배열을 나타냄
Int16Array (opens in a new tab)16비트 정수의 타입 배열을 나타냄
Int32Array (opens in a new tab)32비트 정수의 타입 배열을 나타냄
Intl (opens in a new tab)국제화 및 현지화 기능에 접근 제공
isFinite (opens in a new tab)값이 유한한 수인지 확인
isNaN (opens in a new tab)값이 NaN인지 확인
JSON (opens in a new tab)JavaScript 값을 JSON 형식으로 변환하기 위한 기능 제공
Map (opens in a new tab)각 값이 한 번만 나타날 수 있는 값의 컬렉션을 나타냄
Math (opens in a new tab)수학 함수 및 상수에 접근 제공
Number (opens in a new tab)숫자 값을 나타냄
Object (opens in a new tab)모든 JavaScript 객체의 기본 객체를 나타냄
parseFloat (opens in a new tab)문자열 인수를 부동 소수점 숫자로 구문 분석
parseInt (opens in a new tab)문자열 인수를 지정된 기수의 정수로 구문 분석
Promise (opens in a new tab)비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타냄
Proxy (opens in a new tab)기본 작업에 대한 사용자 정의 동작을 정의하는 데 사용되는 객체를 나타냄(예: 속성 조회, 할당, 열거, 함수 호출 등)
queueMicrotask (opens in a new tab)실행할 마이크로 작업을 큐에 추가
RangeError (opens in a new tab)값이 허용된 값의 집합 또는 범위에 없는 경우 발생하는 오류를 나타냄
ReferenceError (opens in a new tab)존재하지 않는 변수를 참조할 때 발생하는 오류를 나타냄
Reflect (opens in a new tab)인터셉트 가능한 JavaScript 작업에 대한 메서드 제공
RegExp (opens in a new tab)정규 표현식을 나타내며, 문자 조합을 매칭할 수 있게 함
Set (opens in a new tab)각 값이 한 번만 나타날 수 있는 값의 컬렉션을 나타냄
setInterval (opens in a new tab)고정된 시간 지연으로 함수를 반복적으로 호출
setTimeout (opens in a new tab)지정된 밀리초 후에 함수 호출 또는 표현식 평가
SharedArrayBuffer (opens in a new tab)일반 고정 길이 원시 이진 데이터 버퍼를 나타냄
String (opens in a new tab)문자 시퀀스를 나타냄
structuredClone (opens in a new tab)값을 깊이 복사함
Symbol (opens in a new tab)객체 속성 키로 사용되는 고유하고 불변의 데이터 유형을 나타냄
SyntaxError (opens in a new tab)구문적으로 잘못된 코드를 해석하려고 할 때 발생하는 오류를 나타냄
TypeError (opens in a new tab)값이 예상된 유형이 아닌 경우 발생하는 오류를 나타냄
Uint8Array (opens in a new tab)8비트 부호 없는 정수의 타입 배열을 나타냄
Uint8ClampedArray (opens in a new tab)0-255로 클램핑된 8비트 부호 없는 정수의 타입 배열을 나타냄
Uint32Array (opens in a new tab)32비트 부호 없는 정수의 타입 배열을 나타냄
URIError (opens in a new tab)전역 URI 처리 함수가 잘못된 방식으로 사용된 경우 발생하는 오류를 나타냄
URL (opens in a new tab)객체 URL을 생성하기 위한 정적 메서드를 제공하는 객체를 나타냄
URLPattern (opens in a new tab)URL 패턴을 나타냄
URLSearchParams (opens in a new tab)키/값 쌍의 컬렉션을 나타냄
WeakMap (opens in a new tab)키가 약하게 참조되는 키/값 쌍의 컬렉션을 나타냄
WeakSet (opens in a new tab)각 객체가 한 번만 나타날 수 있는 객체의 컬렉션을 나타냄
WebAssembly (opens in a new tab)WebAssembly에 접근 제공

Next.js Specific Polyfills

Environment Variables

process.env를 사용하여 환경 변수에 접근할 수 있습니다 (next dev 및 next build 모두에서).

Unsupported APIs

Edge Runtime에는 몇 가지 제한 사항이 있습니다:

  • 네이티브 Node.js API는 지원되지 않습니다. 예를 들어, 파일 시스템에 읽기 또는 쓰기를 할 수 없습니다.
  • node_modules는 ES 모듈을 구현하고 네이티브 Node.js API를 사용하지 않는 한 사용할 수 있습니다.
  • require를 직접 호출하는 것은 허용되지 않습니다. 대신 ES 모듈을 사용하십시오.

다음 JavaScript 언어 기능은 비활성화되어 있으며 작동하지 않습니다:

API설명
eval (opens in a new tab)문자열로 표현된 JavaScript 코드를 평가함
new Function(evalString) (opens in a new tab)인수로 제공된 코드를 사용하여 새 함수를 생성
WebAssembly.compile (opens in a new tab)버퍼 소스에서 WebAssembly 모듈을 컴파일
WebAssembly.instantiate (opens in a new tab)버퍼 소스에서 WebAssembly 모듈을 컴파일하고 인스턴스화

드문 경우이지만, 코드가 (또는 가져온 코드가) 실행 시간에 도달할 수 없고 트리쉐이킹으로 제거할 수 없는 동적 코드 평가 문을 포함할 수 있습니다. 미들웨어 구성에서 특정 파일을 허용하도록 검사를 완화할 수 있습니다:

middleware.ts
export const config = {
  unstable_allowDynamic: [
    // 단일 파일 허용
    '/lib/utilities.js',
    // function-bind 서드 파티 모듈 내의 모든 것을 허용하는 글롭 사용
    '/node_modules/function-bind/**',
  ],
}

unstable_allowDynamic는 특정 파일에 대한 동적 코드 평가를 무시하는 글롭 (opens in a new tab) 또는 글롭 배열입니다. 글롭은 애플리케이션 루트 폴더를 기준으로 상대적입니다.

이 문이 Edge에서 실행되면 런타임 오류를 발생시키고 예외가 발생합니다.

create-next-appNext.js CLI