هجرة Umbraco إلى Next.js
موقع Umbraco الخاص بك ينزف الميزانية على الاستضافة التي لا يراها المشترون أبداً
Why leave Umbraco?
- Ship every page in 800ms–2.5s because Razor renders server-side and waits on SQL queries before responding
- Score 45–65 on mobile Lighthouse while your buyers judge your site in the first 2 seconds and bounce
- Pay Azure App Service + SQL Server hosting that costs 3–5× what edge-deployed Next.js costs on Vercel
- Hunt for .NET developers in a shrinking talent pool while React/TypeScript developers flood the market
- Scale horizontally with distributed cache hell and database replication your team doesn't want to manage
- Build frontend features without component libraries, hot reload, or any modern design system tooling
What you gain
- Hit 95–100 mobile Lighthouse scores with static generation and edge rendering that ships pages in 80ms
- Drop TTFB from 2+ seconds to sub-100ms with ISR and CDN-first delivery on Vercel or Cloudflare Pages
- Cut hosting spend 60–80% by replacing Azure tiers with edge functions billed per invocation, not uptime
- Hire from the React/TypeScript talent pool — 10× larger and more affordable than .NET CMS specialists
- Deliver your content to mobile apps, kiosks, and third-party platforms via your existing Umbraco API
- Build with component-driven architecture, Storybook, Tailwind, and every modern frontend tool your team wants
لماذا فرق Umbraco تنتقل إلى Next.js
حقق Umbraco سمعته. إنه مفتوح المصدر، مرن، وعميق الجذور في نظام .NET البيئي. أكثر من 16,900 شركة تعمل عليه، مع المملكة المتحدة تمثل حوالي 31٪ من قاعدة التثبيت هذه. إصدار v17 LTS الأخير يثبت أن المشروع حي وبصحة جيدة.
لكن إليك الجزء المحرج: معظم مواقع Umbraco لا تزال تعتمد على Razor views المعاد تصييرها على الخادم خلف IIS أو Azure App Service. الواجهة الأمامية مرتبطة بإحكام بالخلفية .NET. سرعة الصفحة تعاني. التوظيف يصبح أصعب كل عام مع تحول قاعدة المواهب نحو React و TypeScript. وفريق التحرير الخاص بك عالق في سير عمل النشر الذي تم تصميمه للعمارة أحادية اللون — لأنه فعلاً كذلك.
Next.js يحل هذه المشاكل دون إجبارك على رمي كل شيء بنيته. منذ v12، جعلت Umbraco's Content Delivery API الوضع headless حقيقياً ممكناً. يمكنك الاحتفاظ بخلفية Umbraco وإضافة واجهة أمامية Next.js إليها. أو قطع العلاقة بنظافة والهجرة إلى CMS خادم headless مخصص مثل Sanity أو Payload.
نحن وكالة مقرها في المملكة المتحدة. نعرف نظام Umbraco البيئي بحميمية لأنه في كل مكان هنا. نحن أيضاً نعرف متى حان الوقت للانتقال.
نقاط الألم الحقيقية مع Umbraco
اختناقات الأداء
تصيير Umbraco الافتراضي ينتج HTML معاد تصييره على الخادم في كل طلب ما لم تضع طبقة caching قوية فوقه. حتى مع output caching، TTFB على Azure App Service عادة يقع بين 800ms و 2.5 ثانية حسب مستوى الاستضافة وأداء قاعدة البيانات. درجات Lighthouse للجوال على مواقع Umbraco النموذجية تقع بين 45 و 65 — أقل بكثير من عتبات Google's Core Web Vitals.
تجربة مطور الواجهة الأمامية
Razor views تعمل، لكنها محدودة. لا عمارة قائمة على المكونات. لا hot module replacement. لا أدوات نظام التصميم مثل Storybook. المطورون الصغار والمتوسطون بشكل متزايد يأتون من خلفيات React ويجدون طبقة Razor/C# templating محبطة حقاً. التوظيف يصبح الاختناق.
تكاليف الاستضافة والتعقيد
تشغيل Umbraco بشكل صحيح يعني إدارة خوادم Windows، قواعد بيانات SQL Server، وغالباً Azure Blob Storage للوسائط. تكاليف الاستضافة الشهرية لإعداد grade إنتاج نموذجي عادة تتراوح بين £150 و £500+ حسب حركة المرور. قارن ذلك بموقع Next.js ثابت أو ISR-based تم نشره على Vercel أو Cloudflare Pages — لا يقاس.
قيود التوسع
Umbraco لا يتوسع أفقياً بدون جهد كبير. load balancing يتطلب تكوين دقيق للـ distributed cache ومزامنة قاعدة البيانات. نهج CDN-first مع Next.js يلغي معظم هذا التعقيد بالكامل.
جمود نمذجة المحتوى
Document Types في Umbraco قوية، لكنها مرتبطة بإحكام بطبقة التصيير. إعادة استخدام المحتوى عبر القنوات — تطبيقات الجوال، الأكشاك، المنصات من جهات خارجية — يتطلب عمل API مخصص الذي يعالجه Content Delivery API جزئياً فقط.
مساران للهجرة: اختر ما يناسبك
الخيار أ: خلفية Umbraco + واجهة أمامية Next.js
هذا هو المسار منخفض المخاطر. فريق المحتوى الخاص بك يحتفظ باستخدام backoffice Umbraco الآلف. Document Types، عقد المحتوى، مكتبة الوسائط — كل شيء يبقى في مكانه بالضبط. نحن نبني واجهة أمامية Next.js تستهلك Content Delivery API المقدمة في v12+.
يعمل هذا النهج بشكل جيد عندما:
- فريق التحرير الخاص بك مستثمر بعمق في سير عمل Umbraco
- لديك Document Types معقدة مع محتوى متداخل ومحررات كتل
- تريد تقليل مخاطر الهجرة بتغيير طبقة واحدة في المرة
- فريق .NET الخاص بك يمكنه الاستمرار في صيانة الخلفية
نحن نخطط كل Document Type إلى مكون React المقابل. Razor views تصبح Next.js page templates بطريقة مكتوبة. Grid layouts و Block List editors يتم تحويلهما إلى مكونات React قابلة للتكوين مع واجهات TypeScript يتم إنشاؤها من مخطط Umbraco الخاص بك.
الخيار ب: هجرة كاملة إلى Sanity أو Payload CMS
هذا هو مسار القطع النظيف. نستخرج جميع المحتوى من Umbraco، نحوله، وننقله إلى CMS headless حديث. Sanity يعطيك تحرير تعاوني في الوقت الفعلي وسystem schema مرن. Payload CMS مفتوح المصدر، محل استضافة ذاتية، والمبني على Node.js — رفيق طبيعي ل Next.js.
يكون هذا النهج منطقياً عندما:
- نسخة Umbraco الخاصة بك قديمة (pre-v10) والترقية مكلفة
- تريد القضاء على استضافة .NET بالكامل
- تحتاج محتوى منظم يخدم قنوات متعددة
- فريقك يريد مكدس JavaScript/TypeScript موحد
نحن نكتب scripts هجرة مخصصة تخطط Document Types إلى نماذج محتوى CMS، تحافظ على العلاقات بين عقد المحتوى، وتتعامل مع هجرة أصول الوسائط مع إعادة توجيه URL السليمة.
عملية الهجرة الخاصة بنا
1. الاكتشاف والتدقيق (الأسبوع 1-2)
نحن ندقق في نسخة Umbraco الخاصة بك: الإصدار، Document Types، القوالب، المتحكمات المخصصة، حجم الوسائط، التكاملات من جهات خارجية، هيكل URL الحالي. نحن نقيس الأداء الحالية ونحدد الصفحات الحرجة لـ SEO.
2. قرار العمارة (الأسبوع 2)
بناءً على التدقيق، نوصي بالخيار أ أو الخيار ب مع تبرير مفصل. نحدد المكدس التقني، استراتيجية الاستضافة، و content model mapping.
3. خطة نمذجة المحتوى (الأسبوع 2-3)
كل Document Type يتم خطته إلى إما مكون React (الخيار أ) أو نموذج محتوى CMS (الخيار ب). نوثق هذا في مرجع schema مشترك يمكن لكل من المطورين ومحررات المحتوى مراجعته.
4. بناء الواجهة الأمامية (الأسبوع 3-6)
Razor views تصبح مكونات React. نبني نظام التصميم في مكتبة مكونات، نُنشئ page templates، و نربط جلب البيانات عبر إما Umbraco Content Delivery API أو CMS headless الجديد الخاص بك.
5. هجرة المحتوى (الأسبوع 5-7، الخيار ب فقط)
ETL scripts مخصصة تستخرج المحتوى من قاعدة بيانات Umbraco، تحوله للمطابقة مع schema الجديد، وتحمله في CMS المستهدف. نحن نتحقق من كل عقدة محتوى، علاقة، و أصل وسائط.
6. حفظ SEO والإطلاق (الأسبوع 7-8)
هنا حيث تنجح الهجرات أو تفشل. نطبق خريطة redirect كاملة تغطي كل URL. يتم إعادة إنشاء XML sitemaps. البيانات المنظمة يتم نقلها. نتحقق من canonical tags، meta descriptions، و Open Graph data صفحة تلو الأخرى. Screaming Frog crawls تعمل pre- و post-launch للقبض على أي فجوات.
للحصول على مقارنة أعمق بين نهج Umbraco و Next.js، نشرنا تفصيل تقني مفصل.
استراتيجية حفظ SEO
SEO هو اهتمام من الدرجة الأولى طوال الهجرة — لا شيء ننضيفه في النهاية:
- خطة 301 redirect كاملة من كل URL Umbraco إلى المقابل Next.js
- حفظ هيكل الارتباط الداخلي — لا صفحات يتيمة
- هجرة البيانات الوصفية — عناوين الصفحات، الأوصاف، صور OG يتم نقلها برمجياً
- البيانات المنظمة يتم نقلها والتحقق منها مقابل Google's Rich Results Test
- مكاسب الأداء التي تحسن بشكل مباشر تصنيفات Core Web Vitals
- المراقبة بعد الإطلاق مع Search Console و Ahrefs لمدة 90 يوماً
الجدول الزمني والاستثمار
هجرة نموذجية من Umbraco إلى Next.js لموقع متوسط الحجم (50-200 صفحة) تستغرق 6-10 أسابيع حسب التعقيد وأي مسار هجرة تختار.
- الخيار أ (Headless Umbraco + Next.js): £15,000 – £35,000
- الخيار ب (هجرة كاملة إلى Sanity/Payload): £20,000 – £50,000
المواقع الأكبر — التكاملات المعقدة، الإعدادات متعددة اللغات، التجارة الإلكترونية — ستهبط في الطرف الأعلى. نحن نحدد نطاق كل مشروع باقتراح سعر ثابت بعد مرحلة الاكتشاف. لا مفاجآت في منتصف المشروع.
لماذا تعمل مع Social Animal
نحن مقرنا في المملكة المتحدة، لذا نفهم سوق Umbraco أفضل من معظم. عملنا مباشرة مع فرق .NET، هاجرنا Razor codebases، وتعاملنا مع خصائص Umbraco's content architecture المحددة بشكل مباشر. نحن أيضاً نبني تطبيقات Next.js الإنتاجية كل يوم — هذه هي قدرتنا الأساسية.
موقع Umbraco الخاص بك خدمك بشكل جيد. دعونا نتأكد من أن المنصة التالية تخدمك بشكل أفضل.
The migration process
Discovery & Audit
We map every page, post, media file, redirect, and plugin. Nothing gets missed.
Architecture Plan
New stack designed for your content structure, SEO requirements, and performance targets.
Staged Migration
Content migrated in batches. Each batch verified before the next begins.
SEO Preservation
301 redirects, canonical tags, sitemap, robots.txt — every ranking signal carried over.
Launch & Monitor
DNS cutover with zero downtime. 30-day monitoring period included.
Umbraco vs Next.js
| Metric | Umbraco | Next.js |
|---|---|---|
| Lighthouse Mobile | 45-65 | 95-100 |
| TTFB | 0.8-2.5s | <0.1s |
| Build Deploys | 5-15 min (Azure) | 30-90s (Vercel) |
| Hosting Cost | £150-500/mo | £0-30/mo |
| Developer Experience | Razor/C# templates | React/TypeScript components |
| API/Headless | v12+ only (partial) | Full headless-native |
Common questions
هل يمكنني الاحتفاظ باستخدام backoffice Umbraco مع واجهة أمامية Next.js؟
نعم. Umbraco v12+ يتضمن Content Delivery API الذي يعرّض المحتوى الخاص بك كـ JSON endpoints. نبني واجهة Next.js الأمامية لاستهلاك هذا API مباشرة. فريق التحرير الخاص بك يستمر في العمل في backoffice Umbraco بالضبط كما هو الحال من قبل — لن يلاحظوا أي فرق في سير عمل النشر.
كم من الوقت تستغرق هجرة Umbraco إلى Next.js؟
هجرة نموذجية لموقع به 50-200 صفحة تستغرق 6 إلى 10 أسابيع. هذا يغطي الاكتشاف، خطة نمذجة المحتوى، تطوير الواجهة الأمامية، هجرة المحتوى إذا لزم الأمر، التحقق من SEO، و الإطلاق. المواقع التي تحتوي على تكاملات معقدة، لغات متعددة، أو التجارة الإلكترونية يمكن أن تستغرق 12-16 أسبوعاً.
هل ستنخفض تصنيفات Google الخاصة بي أثناء الهجرة؟
لا إذا تمت معالجة الهجرة بشكل صحيح. نطبق خرائط 301 redirect، نحافظ على جميع البيانات الوصفية والبيانات المنظمة، ونراقب Search Console لمدة 90 يوماً بعد الإطلاق. تحسينات الأداء من Next.js تميل إلى إنتاج مكاسب تصنيف في غضون أسابيع مع ارتفاع درجات Core Web Vitals بشكل كبير.
هل يجب أن أختار Sanity أم Payload CMS كبديل لـ Umbraco؟
Sanity هي الخيار الأفضل إذا كنت تريد تحريراً تعاونياً في الوقت الفعلي، content lake مستضافة، و querying قوية مع GROQ. Payload أكثر منطقية إذا كنت بحاجة إلى تحكم الاستضافة الذاتية الكاملة، codebase مفتوح المصدر، و integration محكم مع النظام البيئي Node.js. نتخذ هذا القرار بناءً على احتياجات فريقك المحددة أثناء مرحلة الاكتشاف.
ماذا يحدث لمكتبة وسائط Umbraco أثناء الهجرة؟
جميع أصول الوسائط يتم نقلها برمجياً. نستخرج الملفات من تخزين وسائط Umbraco، نحسّن الصور باستخدام مكون Next.js Image أو CDN مخصص، و ننشئ redirects من عناوين URL وسائط قديمة إلى مواقع جديدة. لا صور مكسورة، لا ملفات مفقودة، لا إعادة رفع يدوية.
هل نسخة Umbraco الخاصة بي قديمة جداً للهجرة إلى Next.js؟
لا نسخة قديمة جداً للهجرة منها — النهج فقط يختلف. Umbraco v12+ يدعم Content Delivery API، لذا إعداد headless (الخيار أ) مباشر. النسخ الأقدم مثل v7 أو v8 عادة تحتاج هجرة كاملة إلى CMS جديد (الخيار ب) منذ أن headless API غير متوفرة. نحن نتعامل مع الاثنين.
كم تكلفة هجرة Umbraco إلى Next.js؟
لموقع متوسط الحجم، الخيار أ (headless Umbraco + واجهة أمامية Next.js) عادة يتراوح £15,000-£35,000. الخيار ب (هجرة كاملة إلى Sanity أو Payload) يتراوح من £20,000-£50,000. بعد تدقيق الاكتشاف، نجمع معاً اقتراح سعر ثابت — لا تكاليف غير متوقعة في منتصف المشروع.
Ready to migrate?
Free assessment. We'll audit your current site and give you a clear migration plan — no commitment.
Let's build
something together.
Whether it's a migration, a new build, or an SEO challenge — the Social Animal team would love to hear from you.