Concetto Labs
إعادة بناء بوّابة شركة هندسة برمجيّات في الهند. محتوى يقوده Sanity، واجهة Next.js على Vercel، استجابة أسرع للنماذج، وعرض أنظف لدراسات الحالة.
عن المشروع.
إعادة بناء كاملة لبوّابة استوديو هندسة برمجيّات في الهند بعدما تخطّى نطاقُه نظامَ WordPress القديم. الموقع الجديد يعمل على Next.js مع Sanity طبقةَ محتوى، وينشر على Vercel بمعاينات لحظيّة. أعدت بناء صفحات دراسات الحالة وصفحات الخدمات وخطّ نماذج الاستفسار لتصل إلى فريق المبيعات نظيفة دون نسخ يدويّ. الهدف أن يقرأ المعرض بالحدّة نفسها التي يتمتّع بها العمل: دقّة، تقنيّة، بلا زخرفة.
ما الذي تغيّر.
من البدء إلى الإطلاق
تراجع بصري في الإنتاج
ما الذي وجدناه.
استوديو هندسة هنديّ تجاوز بوّابته القديمة على WordPress — تجربة تحرير بطيئة، دراسات حالة منسوخة من spreadsheets، نموذج اتّصال يهبط في صندوق لا يقرأه أحد.
ما الذي فعلناه.
إعادة بناء كاملة على Next.js 14 مع Sanity كطبقة محتوى، نُشرت على Vercel مع معاينات فوريّة. أعدت كتابة تخطيط دراسات الحالة، صفحات الخدمات، وخطّ نموذج الاتّصال الذي يدفع إلى أدوات المبيعات دون نسخ يدويّ.
ما الذي أصبح.
تدفّق تحريريّ أسرع، دراسات حالة أنظف، فريق المبيعات يحصل على تسليم مهيكل في CRM الموجود — لا رحلة spreadsheet بعد الآن.
دوري الفعليّ في هذا المشروع.
منفرد · 100٪ ملكيّة هندسة. زوّد العميل النصّ والاتّجاه؛ امتلكت مخطّط Sanity، واجهة Next.js، توصيل خطّ الاتّصالات، ونشر Vercel. صُمّم مخطّط Sanity ليتمكّن كتّابهم غير التقنيّين من نشر دراسات حالة في 30 دقيقة دون تدخّل هندسيّ.
مصمّم مخطّط (Sanity)
نمذجة دراسات الحالة، الخدمات، الفريق، الشهادات، وحمولات نموذج الاتّصال بطريقة تتوسّع مع إضافة الوكالة لقطاعات جديدة. Portable Text للنصوص الغنيّة؛ مراجع مهيكلة لكدسات التقنيّة.
مهندس فرونت-إند
Next.js 14 App Router، ISR لواجهات المحتوى، تصميم متجاوب كامل، أساس وصول (WCAG AA على القوالب الرئيسيّة).
مهندس خطّ الاتّصالات
إرسالات النموذج تدفع إلى CRM الوكالة عبر webhook + مفتاح idempotency؛ يرى فريق المبيعات حمولة مهيكلة (نوع المشروع، الميزانيّة، الجدول) دون إدخال يدويّ.
DevOps / نشر
تكاملات Vercel + Sanity للمعاينة فيرى المحرّرون المسوّدات حيّة قبل النشر. نطاق مخصّص، كاش حافّة، لقطات يوميّة لمحتوى Sanity.
الأرقام التي تهمّ.
- <200msTTFB · p75كاش حافّة Vercel + ISR Next.js. مقاس من حافّات أمريكا + أوروبا + الهند.
- ~10×زمن النشر التحريريّتقديريّ — ملاحظات الطاقم. Sanity Portable Text vs. تدفّق Gutenberg السابق.
- 100/100نتيجة Lighthouse SEOعلى قوالب دراسات الحالة + الخدمات. تحقّق بعد الإطلاق.
- صفرإرسالات اتّصال مفقودةwebhook idempotent + طابور إعادة محاولة استبدل نموذج «mailto:» السابق.
- لا قفلنموذج محتوى محمولتصدير Sanity هو JSON — الوكالة تمتلك البيانات ويمكنها الانتقال من Sanity خلال أيّام لو لزم.
ما الذي كان معطّلاً فعلاً.
وكالة خدمات تعيش أو تموت على صفحة محفظتها. لو بدت دراسات الحالة عامّة، يتعطّل خطّ المبيعات. تجربة تحرير الموقع القديم كانت موجعة لدرجة أنّ دراسات الحالة كانت تُنشَر بعد أشهر من شحن المشروع — وعندها يكون المهندس الذي بناه قد انتقل وصحّة الكتابة 70٪. المطلوب: تدفّق نشر يستغرق 30 دقيقة لدراسة حالة لا 3 ساعات، وتخطيط دراسة حالة يشير إلى «نحن نهندس أنظمة حقيقيّة»، لا «لدينا قالب صور stock».
المساحة الصعبة من المشروع.
- 01يجب أن يكون تدفّق التحرير أسرع 10 مرّات من تدفّق WordPress القديم وإلّا لن يتبنّاه الفريق. Sanity Portable Text + كتل مخصّصة كانا الرهان.
- 02تخطيط دراسة الحالة يجب أن ينقل عمقًا هندسيًّا دون أن يصبح جدار نصّ. تطلّب قالبًا مرنًا قائمًا على الكتل مع دعم لشيفرات + تضمين مخطّطات.
- 03حمولة نموذج الاتّصال تحتاج التوجيه إلى CRM الوكالة (لا قاعدة جديدة) مع idempotency فلا ينشئ webhook متذبذب leads مكرّرة.
- 04ثنائيّ (إنجليزيّ + هنديّ) أُجِّل إلى v2 — المخطّط يستوعبه، لكنّ v1 إنجليزيّ فقط.
- 05معاينة-على-مسوّدة للمحرّرين: أيّ تغيير في Sanity يجب أن يكون مرئيًّا على URL مسوّدة قبل النشر، دون تدخّل هندسيّ.
انتصارات هندسيّة تستحقّ التسمية.
مخطّط Sanity يتوسّع دون أن يصبح spaghetti
نمذجة 8 أنواع محتوى أساسيّة (caseStudy، service، person، testimonial، post، page، technology، vertical) بمراجع صارمة — لا نسخ مدمجة. إضافة قطاع جديد تضيف وثيقة واحدة، لا هجرة مخطّط واحدة.
webhook خطّ اتّصالات idempotent
POST النموذج يولّد UUID في الجانب العميل، يخزّنه الخادم قبل الدفع إلى CRM، ردّ webhook الـCRM يحدّد النجاح. إعادة محاولة على شبكة متذبذبة لا تنشئ أبدًا lead مكرّر في الـCRM.
معاينات مسوّدة دون كشف بيانات مسوّدة
رموز معاينة Sanity محدودة بجلسة محرّر؛ URLs المسوّدة موقّعة وتنتهي خلال 7 أيّام. زواحف عامّة لا ترى المسوّدات أبدًا.
كيف يتشابك النظام.
طبقة الحافّة
طبقة التطبيق
طبقة البيانات
القرارات وراء كلّ اختيار.
Next.js 14 + Vercel
- ISR + إعادة تحقّق عند الطلب تتيح للمحرّرين النشر دون إعادة بناء الموقع كاملاً — التغيير يصير حيًّا خلال ثوانٍ.
- بيئة تشغيل الحافّة + RSC تعطي صفحات دراسات الحالة أداءً شبه ثابت مع شخصنة قاعدة بيانات كاملة عند الحاجة.
- نشرات معاينة Vercel تجعل كلّ PR قابلاً للنقر دون إعداد يدويّ.
Sanity عوضًا عن Contentful/Strapi
- Portable Text أنظف صيغة نصّ غنيّ استخدمتها — JSON أصليّ، أنواع كتل مخصّصة من الدرجة الأولى، تجربة محرّر سريعة.
- Studio مدمج (نفس النطاق، لا دخول منفصل) يقطع احتكاك المحرّر هائلاً.
- الأسعار تتوسّع مع استعلامات API لا مع المقاعد — يناسب وكالة خدمات يقرأ فيها كثير من الناس المحتوى أحيانًا.
webhooks idempotent عوضًا عن كتابة DB مباشرة
- الـCRM هو مصدر حقيقة الـleads. الكتابة إلى DB جانبيّ والمزامنة لاحقًا تنشئ حقيقتين تنحرفان.
- مفتاح idempotency يولّد في الجانب العميل يضمن أمان إعادة المحاولة.
ما علّمنا إيّاه هذا البناء.
- السرعة التحريريّة تحدّد سرعة المحتوى. لو استغرق النشر 3 ساعات، ستتأخّر دراسات الحالة 6 أشهر. لو استغرق 30 دقيقة، تُنشَر في الأسبوع الذي يشحن فيه المشروع.
- Portable Text يستحقّ مكانه. النصّ الغنيّ JSON-أصليّ يعطيك كلّ ما يفتقده Markdown (كتل مخصّصة، مراجع، أجزاء جزئيّة) دون أن يقفلك.
- idempotency لـwebhook أرخص تأمين يمكنك شراؤه. أضفه قبل أن تحتاجه.