كيف أستخدم Next.js في عملي

2026-09-10

Next.js هو خياري الافتراضي لمنتجات الويب، لا لمجرد أنه رائج. تتيح قاعدة TypeScript واحدة تغطية ما كان يتطلب ثلاثة مشاريع: موقعًا تسويقيًا يحتاج إلى الظهور في نتائج البحث، وتطبيقًا خلف تسجيل الدخول، وطبقة API رفيعة تصل بينهما. هذا الموقع مثال صغير: مسارات محلية اللغة، وبيانات وصفية مولّدة، وخريطة موقع، وصور Open Graph، ومسار llms.txt، كلها ضمن مشروع App Router واحد.

أبدأ بالخادم. الصفحات والتخطيطات هي Server Components افتراضيًا: تجلب البيانات بالقرب من قاعدة البيانات، وترسل HTML بدلًا من حزمة JavaScript، وتحفظ الأسرار على الخادم. أضع «use client» عند الأوراق فقط، أي الأجزاء التي تحتاج إلى حالة أو تأثيرات أو واجهات المتصفح — كالنموذج أو القائمة المنسدلة أو الخريطة. عندما يبدأ الشجر كله بـ«use client» في أعلاه، غالبًا ما تتبعه حزمة ضخمة وفئة كاملة من الأخطاء.

اختيار نمط العرض قرار منتج، لا قرار تقني بحت. أستخدم التوليد الثابت للصفحات التي لا تتغير إلا عند النشر. وأستخدم ISR أو إعادة التحقق القائمة على الوسوم للكتالوجات والقوائم والمدونات التي تتغير خلال اليوم: revalidateTag بعد الكتابة، لا مؤقتًا لا يفهمه أحد. أما لوحات المعلومات والمحتوى الشخصي فتناسبها المعالجة الديناميكية مع البث عبر Suspense، كي يظهر الهيكل فورًا ثم تصل البيانات البطيئة. أدوّن سبب كون كل مسار ثابتًا أو ديناميكيًا؛ فهذا السطر الواحد يجنّبنا أسبوعًا من سؤال «لماذا السعر قديم؟».

للتغييرات أستخدم Server Actions للنماذج التابعة للصفحة، وRoute Handlers حين تحتاج جهة خارجية إلى استدعاء التطبيق، مثل webhook من مزود دفع أو Telegram، أو عميل هاتف، أو مهمة cron. في كل الحالات يتحقق Zod من المدخلات على الخادم، ويُفحص تسجيل الدخول هناك، ولا يقرر العميل شيئًا يتعلق بالأموال أو الصلاحيات. في المنتجات الأكبر، يظل Next.js الواجهة الأمامية وBFF، بينما يعيش منطق المجال الأساسي في خدمة NestJS أو Node.js ذات قاعدة بيانات مستقلة.

الأداء وتهيئة محركات البحث جزء من تعريف الإنجاز. أستخدم next/image بأبعاد فعلية، وnext/font لتقليل تحرك التخطيط، وgenerateMetadata والبيانات المنظّمة في كل صفحة عامة، والاستيراد الديناميكي للوحدات الثقيلة. وأفحص Core Web Vitals على هاتف متوسط الإمكانات، لا على MacBook. يكون النشر على Vercel عندما يريد الفريق تجنب عبء التشغيل، أو ببناء standalone داخل Docker على AWS أو VPS عندما تكون التكلفة أو موقع البيانات أو المهام الطويلة مهمة.

أرفض وضع «use client» في التخطيط الجذري، وجلب البيانات نفسها في خمسة مكونات دون التفكير في التخزين المؤقت، وإخفاء منطق الأعمال داخل middleware، والترقية إلى إصدار رئيسي يوم الجمعة دون مراجعة codemod. إذا بدا تطبيق Next.js لديك بطيئًا أو هشًا، فأرسل المستودع وأبطأ صفحتين. سأخبرك بما أنقله إلى الخادم، وما أخزنه مؤقتًا، وما أحذفه.

امنح المنتج القادم شخصاً يبقى معه.

هل أنت مستعد للبدء؟ أرسل لي رسالة؛ أنا متاح للبدء الآن والبقاء. عقود طويلة الأمد، لا تسليم خلال أسبوعين. لنتحدث عن مشروعك ومتطلباته وأفضل طريقة للمضي قدماً.

اسأل عن الخبرة أو الخدمات