Next.js 15 في الإنتاج: Server Components والتخزين والتوسع · تكنوستاك

Next.js 15 في الإنتاج قلب افتراضي التخزين وجعل APIs الطلب Async. خمسة فخاخ، خطة هجرة من 6 خطوات، وما الذي يكسر عند التوسع.

قلب Next.js 15 افتراضي التخزين لـ GET Route Handlers وClient Router Cache من مخزَّن افتراضيًا إلى غير مخزَّن افتراضيًا. وجعل APIs الطلب (headers وcookies وparams وsearchParams) غير متزامنة. وشحن Turbopack Dev مستقرًا. Next.js 15 في الإنتاج ترقية قابلة للقياس، لكنه يصل بثلاثة فخاخ هجرة تكسر الأداء والسلوك بصمت، والخطة للتعامل معها مفهومة جيدًا الآن.

لماذا تستحق Next.js 15 في الإنتاج هجرة منظّمة؟

Next.js 15 في الإنتاج هو الإصدار الذي استقرّت عليه أغلب فرق التجارة الإلكترونية وSaaS الخليجية الكبيرة عبر 2025–2026، ليحلّ محل Next.js 14 وذيل طويل من نشرات Next.js 13 ما زال في الإنتاج. نضج إطار العمل بشكل لافت في هذا الإصدار، فـ Server Components صارت الافتراضي الإنتاجي، نموذج التخزين صار صريحًا لا ضمنيًا، وTurbopack Dev أخيرًا وصل إلى الاستقرار. النتيجة المُجمَّعة إطار عمل أسرع وأوضح وأصدق. لكنه أيضًا إطار به تغييرات كاسرة تعاقب الترقيات العفوية.

سبب استحقاق الهجرة لبنية هو أن أوضاع الفشل صامتة. صفحة عملت بإتقان تحت سلوك Next.js 14 المخزَّن افتراضيًا قد تحمّل بيانات طازجة 10× أكثر تحت Next.js 15، فتنفجر كلفة Origin. مُعالج يقرأ cookies() متزامنًا قد يرمي خطأ في الإنتاج. وثائق إطار العمل ودليل هجرة Vercel وCodemods الرسمية تجعل المسار آمنًا، لكن فقط إن مشى الفريق عليها فعلًا.

فخاخ Next.js 15 الخمسة في الإنتاج

إنفوجرافيك خمسة فخاخ Next.js 15 في الإنتاج: قلب افتراضي التخزين، Async Request APIs، Server vs Client Components، Turbopack Dev، إبطال Tags — خمسة فخاخ، لا أحد منها خطأ، كلها تتطلب تعاملًا صريحًا.

قلب افتراضي التخزين. GET Route Handlers وClient Router Cache غير مخزّنَين افتراضيًا. اختر صراحةً تكوين Cache حيث كان الافتراضي القديم صحيحًا.
Async Request APIs. headers() وcookies() وdraftMode() وparams وsearchParams صارت غير متزامنة. الاستخدام المتزامن القديم يرمي وقت التشغيل. استخدم Codemod الرسمي مع اكتساح للمساعدات المخصصة.
Server مقابل Client Components. اجعل الافتراضي Server Components، عامل Client Components كجزر تفاعلية صغيرة. أنماط "use client" القديمة التي لفّت صفحات كاملة صارت نمطًا مضادًا.
Turbopack Dev مستقر. بدء تطوير أسرع، لكن تكوين webpack القديم وبعض Plugins لا تنتقل بنظافة. جرّب Turbopack Dev مع مهندس أو اثنين قبل الإطلاق على الفريق.
إبطال Tags. revalidateTag وrevalidatePath هما الطريقة المعيارية لإبقاء البيانات الديناميكية طازجة تحت افتراضيات التخزين الجديدة. اربطهما عمدًا، لا تعتمد على إبطال ضمني.

ما الذي واجهناه في هجرة تجارة إلكترونية خليجية حقيقية؟

ثلاث تراجعات محسوسة رأيناها في هجرة بناء تجارة إلكترونية خليجي من Next.js 14 إلى 15:

قفزة كلفة Origin. صفحات قائمة المنتجات التي كانت تخدم من Cache بدأت تضرب Origin في كل طلب. إضافة تكوين Cache الصحيح على Route Handlers وClient Router قطع حركة Origin بعشرة أضعاف.
تعطل خطوة Checkout. استدعاء cookies() متزامن في مساعد مصادقة مخصص رمى وقت التشغيل في الإنتاج. عطل ساعتين قبل أن يكتسحه Codemod.
تضخم Bundle الجوال. مغلّفات "use client" قديمة حول صفحات منتجات كاملة شحنت 200 كيلوبايت من JS عميل بلا داعٍ. إعادة الهيكلة إلى جزر عميل صغيرة قطعت ميزانية JS أول حمل بـ 35%.

خطة هجرة Next.js 15 في 6 خطوات

هذا التسلسل الذي نشغّله مع فرق الواجهة الخليجية المُهاجرة إلى Next.js 15 في الإنتاج:

إنفوجرافيك جدول زمني لخطة هجرة Next.js 15 في ست خطوات من تدقيق التخزين إلى إصدار Canary — ست خطوات، تدقيق تخزين واحد، تقسيم Client/Server واحد، وCanary يلتقط التراجعات قبل الشحن.

دقّق افتراضات التخزين. اسرد كل Route Handler وكل صفحة اعتمدت على السلوك المخزَّن افتراضيًا. قرّر أيها يحتاج تكوين Cache صريحًا.
Async Request APIs. شغّل Codemod الرسمي. ثم Grep لأي مساعدات مخصصة تغلّف headers وcookies وparams وsearchParams وهاجرها يدويًا.
قسّم Server / Client. انقل الكود التقديمي إلى Server Components افتراضيًا. قلّص نطاق Client Components إلى جزر تفاعلية صغيرة فقط.
اربط Revalidate Tags. وسم Fetches التي تحتاج إعادة التحقق معًا. اربط revalidateTag وrevalidatePath في مسارات Mutation التي يجب أن تُبطلها.
شغّل Turbopack Dev. مهندس أو اثنان أولًا. أكّد توافق Plugins ونقل الإعداد قبل الإطلاق على الفريق.
اشحن إلى Canary. 1% من الحركة لأسبوع. قارن LCP وINP وكلفة Origin ومعدّل الأخطاء بخط أساس Next.js 14. تابع التقدم فقط حين تتحرّك الأرقام في الاتجاه الصحيح.

كيف يبدو Next.js 15 في الإنتاج بعد 90 يومًا؟

نشر إنتاجي صحي لـ Next.js 15 يُظهر ثلاثة منتجات بعد تسعين يومًا من الهجرة: Core Web Vitals مستقرة أو محسّنة مقارنة بخط أساس Next.js 14، حركة Origin عند أو دون مستويات ما قبل الهجرة، وصفر أخطاء وقت تشغيل من Request APIs غير الـ Awaited. إن انزلق أي من الثلاثة، يحتاج التدقيق جولة أخرى، تقريبًا دائمًا على تكوين Cache أو نطاق Client Component.

عند تنفيذه جيدًا، يشحن Next.js 15 في الإنتاج حزمة أسرع وأنظف بنموذج تخزين أوضح وحلقة تطوير أسرع. عند تنفيذه سيئًا، يشحن قفزة كلفة Origin وفئة أخطاء وقت تشغيل صامتة. الفخاخ الخمسة وخطة الهجرة هما الفرق.

أسئلة شائعة

ما الذي تغيّر في تخزين Next.js 15؟

قلب Next.js 15 افتراضيَين مهمَّين: GET Route Handlers وClient Router Cache صارا غير مخزَّنَين افتراضيًا. الفرق التي اعتمدت على السلوك السابق المخزَّن افتراضيًا يجب أن تختار صراحةً Cache Directives. تخطّي هذا التدقيق هو أكثر تراجع هجرة شيوعًا نراه.

هل headers() وcookies() وparams صارت Async في Next.js 15؟

نعم. headers() وcookies() وdraftMode() وparams وsearchParams صارت APIs غير متزامنة ويجب await. الاستخدام المتزامن من إصدارات قديمة يرمي خطأ وقت التشغيل. استخدم Codemod الرسمي للهجرة، ثم اكتسح كودك لأي مساعدات مخصصة تغلّف هذه APIs.

هل Turbopack Dev آمن للاستخدام في بناءات الإنتاج؟

Turbopack Dev مستقر للتطوير في Next.js 15 ويسلّم بدءًا أسرع. بناءات الإنتاج تبقى افتراضيًا على Bundler الراسخ إلا إن اخترت Turbopack للإنتاج. أغلب الفرق الخليجية تتبنّى Turbopack Dev أولًا، ثم تقيّم Turbopack Build بعد تأكيد توافق Plugins والإعداد.

كتبه سامي طارق، الذي شحن بناءات Next.js إنتاجية لفرق تجارة إلكترونية وSaaS خليجية منذ 2020.

كل الخدمات