الفرق بين المراجعتين لصفحة: «Next.js/edge runtime»
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) ط مراجعة |
||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: | <noinclude>{{DISPLAYTITLE:المُشغل المتقدم Edge Runtime في Next.js }}</noinclude> | ||
يعتمد المُشغل الآني المتقدم Edge Runtime في Next.js على واجهات الويب البرمجية Web API التي تُستخدم من قبل [[Next.js/middleware|البرمجيات الوسيطة]] أو [[Next.js/api routes|وجهات API المتقدمة]]. | |||
== الواجهة البرمجية للشبكة == | == الواجهة البرمجية للشبكة == | ||
*[https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener <code>addEventListener</code>] | |||
* <code>addEventListener</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API <code>Fetch</code>] | ||
* <code>Fetch</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent <code>FetchEvent</code>] | ||
* <code>FetchEvent</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/Headers <code>Headers</code>] | ||
* <code>Headers</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/Request <code>Request</code>] | ||
* <code>Request</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/Response <code>Response</code>] | ||
* <code>Response</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams <code>URLSearchParams</code>] | ||
* <code>URLSearchParams</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/FormData <code>FormData</code>] | ||
* <code>FormData</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/File <code>File</code>] | ||
* <code>File</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/Blob <code>Blob</code>] | ||
* <code>Blob</code> | |||
== الواجهة البرمجية للتشفير == | == الواجهة البرمجية للتشفير == | ||
*[https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder <code>TextDecoder</code>] | |||
* <code>TextDecoder</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder <code>TextEncoder</code>] | ||
* <code>TextEncoder</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/atob <code>atob</code>] | ||
* <code>atob</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa <code>btoa</code>] | ||
* <code>btoa</code> | |||
== الواجهة البرمجية لنقل البيانات عبر ويب == | == الواجهة البرمجية لنقل البيانات عبر ويب == | ||
*[https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream <code>ReadableStream</code>] | |||
* <code>ReadableStream</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamBYOBReader <code>ReadableStreamBYOBReader</code>] | ||
* <code>ReadableStreamBYOBReader</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader <code>ReadableStreamDefaultReader</code>] | ||
* <code>ReadableStreamDefaultReader</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/TransformStream <code>TransformStream</code>] | ||
* <code>TransformStream</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/WritableStream <code>WritableStream</code>] | ||
* <code>WritableStream</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/WritableStreamDefaultWriter <code>WritableStreamDefaultWriter</code>] | ||
* <code>WritableStreamDefaultWriter</code> | |||
== واجهة ويب البرمجية Crypto == | == واجهة ويب البرمجية Crypto == | ||
*[https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API <code>crypto</code>] | |||
* <code>crypto</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/CryptoKey <code>CryptoKey</code>] | ||
* <code>CryptoKey</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto <code>SubtleCrypto</code>] | ||
* <code>SubtleCrypto</code> | |||
== واجهة ويب البرمجية المعيارية == | == واجهة ويب البرمجية المعيارية == | ||
*[https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm <code>structuredClone</code>] | |||
* <code>structuredClone</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/URLPattern <code>URLPattern</code>] | ||
* <code>URLPattern</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/Cache <code>Web Cache</code>] | ||
* <code>Web Cache</code> | |||
== أساسيات المحرّك V8 == | == أساسيات المحرّك V8 == | ||
*[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array <code>Array</code>] | |||
* <code>Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer <code>ArrayBuffer</code>] | ||
* <code>ArrayBuffer</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics <code>Atomics</code>] | ||
* <code>Atomics</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt <code>BigInt</code>] | ||
* <code>BigInt</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array <code>BigInt64Array</code>] | ||
* <code>BigInt64Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array <code>BigUint64Array</code>] | ||
* <code>BigUint64Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean <code>Boolean</code>] | ||
* <code>Boolean</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval <code>clearInterval</code>] | ||
* <code>clearInterval</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout <code>clearTimeout</code>] | ||
* <code>clearTimeout</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/Console <code>console</code>] | ||
* <code>console</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView <code>DataView</code>] | ||
* <code>DataView</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date <code>Date</code>] | ||
* <code>Date</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI <code>decodeURI</code>] | ||
* <code>decodeURI</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent <code>decodeURIComponent</code>] | ||
* <code>decodeURIComponent</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI <code>encodeURI</code>] | ||
* <code>encodeURI</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent <code>encodeURIComponent</code>] | ||
* <code>encodeURIComponent</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error <code>Error</code>] | ||
* <code>Error</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError <code>EvalError</code>] | ||
* <code>EvalError</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array <code>Float32Array</code>] | ||
* <code>Float32Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array <code>Float64Array</code>] | ||
* <code>Float64Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function <code>Function</code>] | ||
* <code>Function</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity <code>Infinity</code>] | ||
* <code>Infinity</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int8Array <code>Int8Array</code>] | ||
* <code>Int8Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array <code>Int16Array</code>] | ||
* <code>Int16Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array <code>Int32Array</code>] | ||
* <code>Int32Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl <code>Intl</code>] | ||
* <code>Intl</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite <code>isFinite</code>] | ||
* <code>isFinite</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN <code>isNaN</code>] | ||
* <code>isNaN</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON <code>JSON</code>] | ||
* <code>JSON</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map <code>Map</code>] | ||
* <code>Map</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math <code>Math</code>] | ||
* <code>Math</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number <code>Number</code>] | ||
* <code>Number</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object <code>Object</code>] | ||
* <code>Object</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat <code>parseFloat</code>] | ||
* <code>parseFloat</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt <code>parseInt</code>] | ||
* <code>parseInt</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise <code>Promise</code>] | ||
* <code>Promise</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy <code>Proxy</code>] | ||
* <code>Proxy</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError <code>RangeError</code>] | ||
* <code>RangeError</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError <code>ReferenceError</code>] | ||
* <code>ReferenceError</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect <code>Reflect</code>] | ||
* <code>Reflect</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp <code>RegExp</code>] | ||
* <code>RegExp</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set <code>Set</code>] | ||
* <code>Set</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval <code>setInterval</code>] | ||
* <code>setInterval</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout <code>setTimeout</code>] | ||
* <code>setTimeout</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer <code>SharedArrayBuffer</code>] | ||
* <code>SharedArrayBuffer</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String <code>String</code>] | ||
* <code>String</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol <code>Symbol</code>] | ||
* <code>Symbol</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError <code>SyntaxError</code>] | ||
* <code>SyntaxError</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder <code>TextDecoder</code>] | ||
* <code>TextDecoder</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder <code>TextEncoder</code>] | ||
* <code>TextEncoder</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError <code>TypeError</code>] | ||
* <code>TypeError</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array <code>Uint8Array</code>] | ||
* <code>Uint8Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray <code>Uint8ClampedArray</code>] | ||
* <code>Uint8ClampedArray</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array <code>Uint16Array</code>] | ||
* <code>Uint16Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array <code>Uint32Array</code>] | ||
* <code>Uint32Array</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError <code>URIError</code>] | ||
* <code>URIError</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/URL <code>URL</code>] | ||
* <code>URL</code> | *[https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams <code>URLSearchParams</code>] | ||
* <code>URLSearchParams</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap <code>WeakMap</code>] | ||
* <code>WeakMap</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet <code>WeakSet</code>] | ||
* <code>WeakSet</code> | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly <code>WebAssembly</code>] | ||
* <code>WebAssembly</code> | |||
== متغيرات البيئة == | == متغيرات البيئة == | ||
بإمكانك استخدام الملف <code>process.env</code> للوصول إلى [[Next.js/environment variables|متغيرات البيئة]] عبر <code>next dev</code> و <code>next build</code>. إنّ تنفيذ التعليمة <code>console.log</code> على <code>process.env</code> لن يعرض جميع متغيرات البيئة، وعليك ان تصل إلى المتغيرات مباشرة كالتالي:<syntaxhighlight lang="javascript"> | بإمكانك استخدام الملف <code>process.env</code> للوصول إلى [[Next.js/environment variables|متغيرات البيئة]] عبر <code>next dev</code> و <code>next build</code>. إنّ تنفيذ التعليمة <code>console.log</code> على <code>process.env</code> لن يعرض جميع متغيرات البيئة، وعليك ان تصل إلى المتغيرات مباشرة كالتالي:<syntaxhighlight lang="javascript"> | ||
سطر 117: | سطر 105: | ||
== الواجهات البرمجية غير المدعومة == | == الواجهات البرمجية غير المدعومة == | ||
* لا تُدعم الواجهة البرمجية الأصلية | * لا تُدعم الواجهة البرمجية الأصلية لبيئة Node.js، فلن تتمكن من القراءة أو الكتابة إلى نظام الملفات. | ||
* يمكن استخدام <code>node_modules</code> طالما أنها تُنجز باستخدام وحدات ES ولا تستخدم واجهة Node.js البرمجية الأصلية. | * يمكن استخدام <code>node_modules</code> طالما أنها تُنجز باستخدام وحدات ES ولا تستخدم واجهة Node.js البرمجية الأصلية. | ||
* لا يُسمح باستدعاء <code>require</code> مباشرة، لا بد من استخدام وحدات ES بدلًا منه. | * لا يُسمح باستدعاء <code>require</code> مباشرة، لا بد من استخدام وحدات ES بدلًا منه. | ||
* عُطلت ميزات لغة JavaScript التالية: | * عُطلت ميزات لغة JavaScript التالية: | ||
** <code>eval</code>: تقييم شيفرة JavaScript المُمثَّلة كنص. | **<code>eval</code>: تقييم شيفرة JavaScript المُمثَّلة كنص. | ||
** <code>new Function(evalString)</code>: إنشاء دالة جديدة من خلال شيفرة قُدمّت كوسيط argument. | ** <code>new Function(evalString)</code>: إنشاء دالة جديدة من خلال شيفرة قُدمّت كوسيط argument. | ||
** <code>WebAssembly.compile</code> | |||
** <code>WebAssembly.instantiate</code> مع [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code معامل مخزن مؤقت buffer]. | |||
قد تحوي شيفرتك في حالات نادرة تعليمات تقييم ديناميكية لا يمكن الوصول إليها وقت التنفيذ ولا يمكن حذفها أثناء عملية treeshaking ويمكنك تسهيل التحقق بالسماح بملفات محددة مع الضبط المُصدَّر مع البرمجيات الوسيطة Middleware أو وجهة الواجهة البرمجية المتقدمة Edge API Route:<syntaxhighlight lang="javascript"> | |||
export const config = { | |||
runtime: 'edge', // for Edge API Routes only | |||
unstable_allowDynamic: [ | |||
'/lib/utilities.js', // allows a single file | |||
'/node_modules/function-bind/**', // use a glob to allow anything in the function-bind 3rd party module | |||
], | |||
} | |||
</syntaxhighlight><code>unstable_allowDynamic</code> هو من نوع [https://github.com/micromatch/micromatch#matching-features glop] أو مصفوفة من أنواع glop يؤدي إلى تجاهل تقييم الشيفرة الديناميكية لملفات محددة ويكون نسبةً إلى المجلد الجذر لتطبيقك. | |||
انتبه، إذ إن نُفِّذت هذه التعليمات في المُشغل المتقدم Edge فتتسبب بخطأ وقت التنفيذ. | |||
== المصادر == | == المصادر == | ||
* الصفحة [https://nextjs.org/docs/api-reference/edge-runtime Edge Runtime] من توثيق Next.js الرسمي. | * الصفحة [https://nextjs.org/docs/api-reference/edge-runtime Edge Runtime] من توثيق Next.js الرسمي. |
مراجعة 18:03، 1 يناير 2023
يعتمد المُشغل الآني المتقدم Edge Runtime في Next.js على واجهات الويب البرمجية Web API التي تُستخدم من قبل البرمجيات الوسيطة أو وجهات API المتقدمة.
الواجهة البرمجية للشبكة
الواجهة البرمجية للتشفير
الواجهة البرمجية لنقل البيانات عبر ويب
ReadableStream
ReadableStreamBYOBReader
ReadableStreamDefaultReader
TransformStream
WritableStream
WritableStreamDefaultWriter
واجهة ويب البرمجية Crypto
واجهة ويب البرمجية المعيارية
أساسيات المحرّك V8
Array
ArrayBuffer
Atomics
BigInt
BigInt64Array
BigUint64Array
Boolean
clearInterval
clearTimeout
console
DataView
Date
decodeURI
decodeURIComponent
encodeURI
encodeURIComponent
Error
EvalError
Float32Array
Float64Array
Function
Infinity
Int8Array
Int16Array
Int32Array
Intl
isFinite
isNaN
JSON
Map
Math
Number
Object
parseFloat
parseInt
Promise
Proxy
RangeError
ReferenceError
Reflect
RegExp
Set
setInterval
setTimeout
SharedArrayBuffer
String
Symbol
SyntaxError
TextDecoder
TextEncoder
TypeError
Uint8Array
Uint8ClampedArray
Uint16Array
Uint32Array
URIError
URL
URLSearchParams
WeakMap
WeakSet
WebAssembly
متغيرات البيئة
بإمكانك استخدام الملف process.env
للوصول إلى متغيرات البيئة عبر next dev
و next build
. إنّ تنفيذ التعليمة console.log
على process.env
لن يعرض جميع متغيرات البيئة، وعليك ان تصل إلى المتغيرات مباشرة كالتالي:
console.log(process.env)
// { NEXT_RUNTIME: 'edge' }
console.log(process.env.TEST_VARIABLE)
// { NEXT_RUNTIME: 'edge', TEST_VARIABLE: 'value' }
الواجهات البرمجية غير المدعومة
- لا تُدعم الواجهة البرمجية الأصلية لبيئة Node.js، فلن تتمكن من القراءة أو الكتابة إلى نظام الملفات.
- يمكن استخدام
node_modules
طالما أنها تُنجز باستخدام وحدات ES ولا تستخدم واجهة Node.js البرمجية الأصلية. - لا يُسمح باستدعاء
require
مباشرة، لا بد من استخدام وحدات ES بدلًا منه. - عُطلت ميزات لغة JavaScript التالية:
eval
: تقييم شيفرة JavaScript المُمثَّلة كنص.new Function(evalString)
: إنشاء دالة جديدة من خلال شيفرة قُدمّت كوسيط argument.WebAssembly.compile
WebAssembly.instantiate
مع معامل مخزن مؤقت buffer.
قد تحوي شيفرتك في حالات نادرة تعليمات تقييم ديناميكية لا يمكن الوصول إليها وقت التنفيذ ولا يمكن حذفها أثناء عملية treeshaking ويمكنك تسهيل التحقق بالسماح بملفات محددة مع الضبط المُصدَّر مع البرمجيات الوسيطة Middleware أو وجهة الواجهة البرمجية المتقدمة Edge API Route:
export const config = {
runtime: 'edge', // for Edge API Routes only
unstable_allowDynamic: [
'/lib/utilities.js', // allows a single file
'/node_modules/function-bind/**', // use a glob to allow anything in the function-bind 3rd party module
],
}
unstable_allowDynamic
هو من نوع glop أو مصفوفة من أنواع glop يؤدي إلى تجاهل تقييم الشيفرة الديناميكية لملفات محددة ويكون نسبةً إلى المجلد الجذر لتطبيقك.
انتبه، إذ إن نُفِّذت هذه التعليمات في المُشغل المتقدم Edge فتتسبب بخطأ وقت التنفيذ.
المصادر
- الصفحة Edge Runtime من توثيق Next.js الرسمي.