Next.js 16 وReact 19 في الإنتاج: 7 أشياء تغيّرت فعلاً في طريقة بنائنا للمواقع
أعدنا بناء موقع سمارت ليد تك نفسه، ومنصّة Pioneers التحريرية، ومنصّة KSA Leaders على Next.js 16 وReact 19. ليست مقالة «ما الجديد»؛ هي قائمة بما غيّر قراراتنا فعلاً، وبما لم يستحقّ الضجّة. 1. الخادم أولاً صار الافتراضي ال…
أعدنا بناء موقع سمارت ليد تك نفسه، ومنصّة Pioneers التحريرية، ومنصّة KSA Leaders على Next.js 16 وReact 19. ليست مقالة «ما الجديد»؛ هي قائمة بما غيّر قراراتنا فعلاً، وبما لم يستحقّ الضجّة.
1. الخادم أولاً صار الافتراضي الحقيقي
معظم أقسام الصفحة مكوّنات خادم تقرأ من الـ CMS وقت البناء. المكوّنات العميلة صغيرة ومسمّاة بوضوح (*Reveal، *Slider). النتيجة في موقعنا: HTML كامل بالعربية في أول بايت، ومحرّكات البحث تقرأ المحتوى لا هيكلاً فارغاً.
2. القوائم تُصيَّر في HTML حتى مع حالة في الـ URL
في صفحة «أعمالنا» كانت مرشّحات الـ URL تُسقط الصفحة كلها إلى العميل. الحل: useSyncExternalStore لحالة الـ URL بدل useSearchParams، فبقيت القائمة الأولى في HTML وبقي التصفية تفاعلياً.
3. التصدير الثابت لم يمت — بل صار أنظف
الموقع يُبنى بـ output: "export" ويُنشر على استضافة مشتركة بتبديل ذرّي للمجلد. لا خادم Node في الإنتاج، ولا فاتورة حوسبة. الثمن: صور غير مُحسَّنة تلقائياً — فأصبحنا نُحسّنها وقت الالتزام (أحجام دقيقة، WebP، srcset يدوي).
4. الإجراءات (Actions) للنماذج بلا API وسيطة
في KSA Leaders، نموذج ترشيح شخصية يُرسل عبر Server Action إلى الـ Laravel API مباشرة، مع تحقّق مزدوج. أقل ملفات، وحالة تحميل ونجاح وفشل مبنية في React 19 (useActionState) بدل مكتبة خارجية.
5. ثنائية اللغة ليست ميزة، هي بنية
- كل مسار تحت
[locale]، والعربية هي الافتراضية. - الخصائص المنطقية (
ps-،text-start) بدل اليمين/اليسار. - الأرقام والهواتف داخل
dir="ltr"معزولة ثنائياً.
6. الحركة يجب أن تبدأ قبل الترطيب (Hydration)
الرأس كان يظهر بعد ثوانٍ على الهواتف البطيئة لأن الحركة تنتظر JavaScript. نقلنا حركات الدخول إلى CSS keyframes، وأبقينا Motion للتفاعلات فقط. أول رسم أصبح فورياً، وعنصر LCP لا يُخفى بحركة أبداً.
7. ما لم يستحقّ الضجّة
الـ Partial Prerendering ممتاز نظرياً، لكن مع تصدير ثابت لا يعنينا. والـ Turbopack أسرع فعلاً، لكنه لم يغيّر قراراً معمارياً واحداً. السرعة الحقيقية جاءت من قرارات مملّة: أحجام صور، ترتيب تحميل الخطوط، وتقليل المكوّنات العميلة.
الإطار الجديد يمنحك أدوات أفضل ليخطئ فريقك بسرعة أكبر — أو ليصيب بسرعة أكبر. الفرق في القواعد المكتوبة في المستودع.
