مدوّنتنا
تصفّح مقالات مدوّنتنا حول تصميم وتطوير المواقع والتسويق الرقمي لتبقى على اطّلاع بأحدث التوجّهات والاستراتيجيات.
تم العثور على 101 مقال
تيربوريبو في مستودع أحادي حقيقي: ملاحظات ميدانية عن فشل التخزين المؤقت وتسميم متغيرات NEXT_PUBLIC ومفتاح tasks الذي حلّ محل pipeline
تيربوريبو أداة لتشغيل المهام تحسب بصمة لمدخلات كل سكربت وتعيد تشغيل المخرجات المخزّنة بدل تنفيذ العمل من جديد. نقلنا مستودعاً أحادياً يضم تطبيقين إلى تيربوريبو 2، وهذه ملاحظاتنا عن سبب فشل التخزين المؤقت، وعن مرة شحن فيها التخزين المؤقت روابط بيئة الاختبار إلى الإنتاج، وعن سبب بناء --affected لكل شيء بصمت مع نسخة git ضحلة في التكامل المستمر.
Temporal في الإنتاج: استبدال كائن Date في جافاسكربت، وإصلاح خطأ «اليوم نفسه»، والحد الذي لا تعبره مكوّنات الخادم
Temporal هي واجهة TC39 التي تستبدل كائن Date في جافاسكربت بأنواع غير قابلة للتعديل وواعية بالمناطق الزمنية. نقلنا معالجة التواريخ في تطبيق Next.js إلى Temporal، وهذه ملاحظاتنا الميدانية: أي نوع من Temporal يناسب كل حقل، ولماذا لا يمكن تمرير كائنات Temporal كخصائص من مكوّن خادم إلى مكوّن عميل، وكيف نحافظ على دقة الرحلة إلى قاعدة بيانات Postgres والعودة منها.
المسارات المتوازية والمسارات الاعتراضية في Next.js App Router: ملاحظات ميدانية حول نمط النافذة المنبثقة للصور
نستخدم المسارات المتوازية والمسارات الاعتراضية لبناء نوافذ صور قابلة للمشاركة في Next.js App Router — فتحات @ المسمّاة، وقاعدة الاعتراض (.)، وملف default.tsx الذي يحدد ما يحدث عند التحديث الكامل للصفحة.
المراقبة (Observability) في Next.js App Router: ملاحظات ميدانية عن instrumentation.ts وonRequestError والتتبع الذي تسرّب بين الطلبات
ملف instrumentation.ts ودالة onRequestError يمنحان Next.js App Router تتبعًا حقيقيًا وإبلاغًا مركزيًا عن الأخطاء، لكن إعادة استخدام Fluid Compute لنسخة واحدة عبر طلبات متزامنة كسرت متغيرًا على مستوى الوحدة كنا نعتمد عليه لسنوات. ملاحظاتنا الميدانية حول إعداد OpenTelemetry بشكل صحيح.
اختبار App Router في Next.js: ملاحظات ميدانية حول Server Components، محاكاة fetch()، ومتى يتولى Playwright المهمة
تُنفَّذ Server Components عبر محرك RSC في Next.js وليس عبر react-dom، لذا لا تستطيع React Testing Library عرضها مباشرة. ملاحظات ميدانية حول هرم اختبار عملي فعلاً: دوال مستخرجة وClient Components عبر Vitest، واستدعاء Server Actions مباشرة، ومسارات كاملة عبر Playwright.
اتصالات قواعد البيانات في البيئات بلا خوادم: حساب المجمّع ووضع المعاملات في PgBouncer
مجمّع الاتصالات في النشر بلا خوادم يخص كل نسخة تشغيل على حدة وليس التطبيق كله، لذا فالحد الأقصى الحقيقي هو عدد النسخ المتزامنة مضروبًا في حجم المجمّع. ملاحظات فريقنا حول سبب رفض PostgreSQL للاتصالات، وما غيّره Fluid Compute، وإعدادات المشغّلات التي تنجو من وضع المعاملات.
متغيرات البيئة في Next.js: التضمين وقت البناء، مسارات التسريب الحقيقية، وإفشال البناء باستخدام Zod
متغير NEXT_PUBLIC_ لا يُقرأ وقت التشغيل — بل يضمّنه Next.js في الحزمة أثناء البناء. ملاحظاتنا الميدانية حول الطرق الثلاث التي تضرب بها هذه الحقيقة تطبيقات الإنتاج: قيم قديمة تنجو من إعادة النشر، والمسارات الحقيقية التي يتسرب بها سر خادمي إلى المتصفح، ومخطط Zod يُفشل البناء بدلًا من أول طلب.
الويب هوكس في Next.js App Router: الجسم الخام للطلب، والتحقق من التوقيع، وإرجاع 200 بسرعة
توقيع الويب هوك هو HMAC محسوب على بايتات الطلب الخام، لذا فإن تحليل الجسم قبل التحقق يدمر الدليل. ملاحظاتنا الميدانية من ربط ويب هوكس المدفوعات و Git في Next.js App Router: استخدام req.text()، والمقارنة بزمن ثابت، والرد السريع، والمعالجة بدون تكرار.
next/image في Next.js 16: ما الذي لا يحدث تلقائيًا في تحسين الصور
استخدام next/image لا يعني أن الصور سريعة. المكوّن يؤجل تحميل كل صورة افتراضيًا ما لم تمرر priority، وخطأ في خاصية sizes يجعل بطاقة بعرض 400 بكسل تنزّل نسخة بعرض 3840 بكسل. جمعنا هنا الأجزاء التي يضبطها فريقنا يدويًا.
تحديد معدل الطلبات في Next.js App Router: ما الذي ينكسر على الخوادم بلا حالة وكيف نصلحه
محدّد معدل الطلبات المخزّن في ذاكرة العملية خاطئ على الخوادم بلا حالة لأن كل نسخة دالة تحتفظ بعدّادها الخاص. نشرح أين يجب أن يعيش العدّاد، وكيف نشتق هوية عميل موثوقة، ولماذا يحتاج Server Action في Next.js إلى الحد داخل جسم الإجراء نفسه.
رفع الملفات في Next.js App Router: ملاحظاتنا الميدانية حول Vercel Blob والرفع من المتصفح والاستدعاء الذي لا يعمل على localhost
الرفع من المتصفح عبر Vercel Blob يُرسل بايتات الملف مباشرة من المتصفح إلى التخزين دون المرور بدالة Next.js، ولهذا يتعامل مع ملفات لا يستطيع route handler التعامل معها. المقابل أن صف قاعدة البيانات يُكتب عبر استدعاء خادم-إلى-خادم اسمه onUploadCompleted، وهذا الاستدعاء لا يصل إلى localhost أبدًا.
إشعارات Web Push في Next.js App Router: كيف نبني Service Workers ومفاتيح VAPID وتدفق أذونات آمن على iOS
Web Push هي واجهة برمجية في المتصفح توصّل إشعارًا من الخادم إلى جهاز المستخدم حتى والموقع مغلق. نشرح الأجزاء الثلاثة التي يحتاجها مشروع Next.js App Router: service worker يُقدَّم من جذر النطاق، وزوج مفاتيح VAPID، وroute handler يعمل على بيئة Node.js، إضافة إلى قاعدة iOS الخاصة بالتثبيت على الشاشة الرئيسية التي تُعطّل كل شيء بصمت.
ابقَ على اطّلاع
اشترك في نشرتنا البريدية للحصول على أحدث الرؤى حول تصميم وتطوير المواقع والتسويق الرقمي.