الفرق بين المراجعتين ل"Next.js/edge runtime"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (مراجعة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:واجهة زمن التشغيل البرمجية الحدودية في Next.js }}</noinclude>
+
<noinclude>{{DISPLAYTITLE:المُشغل المتقدم Edge Runtime في Next.js }}</noinclude>
تعتمد واجهة زمن التشغيل البرمجية الحدودية Edge Runtime API في Next.js على الواجهة البرمجية Web التي تُستخدم من قبل [[Next.js/middleware|الأداة الوسطية]] أو [[Next.js/api routes|وجهات API الحدودية]].
+
يعتمد المُشغل الآني المتقدم 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، فلن تتمكن من القراءة أو الكتابة إلى منظومة الملفات.
+
* لا تُدعم الواجهة البرمجية الأصلية لبيئة 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 المتقدمة.

الواجهة البرمجية للشبكة

الواجهة البرمجية للتشفير

الواجهة البرمجية لنقل البيانات عبر ويب

واجهة ويب البرمجية Crypto

واجهة ويب البرمجية المعيارية

أساسيات المحرّك V8

متغيرات البيئة

بإمكانك استخدام الملف 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 الرسمي.