كل الأعمال
مشروع منفَّذدليل ثنائي اللغة · منصة ويب

Differeg

Differeg دليل مختار للعلامات المصرية ومن يقف خلفها، منشور بالعربية والإنجليزية. أعدنا بناءه على Next.js App Router بحيث تقود الظهور في البحث — لا التفاعل داخل المتصفح — قرارات المعمار.

differeg.comزيارة الموقع
الصفحة الرئيسية لـ Differeg بعنوان «بيت العلامات المصرية» مع زر استكشاف العلامات
النوع
مشروع منفَّذ
اللغات
الإنجليزية والعربية (RTL)
النطاق
إعادة بناء، معمار SEO، خدمة مراجعات
المنصة
الويب

التحدي

الدليل لا ينجح إلا إذا استطاعت محركات البحث قراءته. النسخة السابقة كانت تطبيق صفحة واحدة يُبنى في المتصفح، أي أن المحتوى المهم — أوصاف العلامات والفئات والمراجعات والتقييمات — يظهر بعد تحميل JavaScript، بلغة واحدة وعلى رابط واحد.

وكان لا بد أن يكون ثنائي اللغة فعلًا: العربية ليست طبقة ترجمة تُضاف إلى موقع إنجليزي، بل تحتاج روابطها الخاصة وبياناتها الوصفية الخاصة وتخطيطًا من اليمين إلى اليسار لا يبدو انعكاسًا متأخرًا.

الحل

نقلنا التطبيق إلى Next.js App Router بروابط مسبوقة باللغة (`/en/…` و `/ar/…`)، مع تثبيت `lang` و `dir` داخل HTML الثابت، وبدائل hreflang للغتين و `x-default`، وبيانات وصفية بلغتين في كل مسار.

تُقرأ المراجعات داخل Server Component، فتُرسل قائمة المراجعات ومعدّل التقييم داخل HTML الأولي. هذا ما يجعل بيانات Product و AggregateRating و Review منظّمة وصحيحة — لأنها تصف محتوى يستطيع الزاحف رؤيته فعلًا.

الكتابة تمر عبر Server Action لا عبر مسار API: تحقّق بـ Zod، ثم فحص Cloudflare Turnstile، ثم إدخال بمفتاح الخدمة الذي لا يترك الخادم. وتسمح سياسات أمان الصفوف بالقراءة العامة فقط.

المحتوى يعيش في وحدات TypeScript مُنمّطة خلف دوال وصول، وهذا قرار مقصود: لا فاتورة نظام إدارة محتوى ما دام الكتالوج صغيرًا، وإضافته لاحقًا تمسّ ملفات البيانات لا المسارات.

أهم القدرات

مسارات ثنائية اللغة

شجرتا روابط منفصلتان للعربية والإنجليزية مع بدائل hreflang، وتخطيط من اليمين إلى اليسار، واكتشاف اللغة من الكوكي ثم من ترويسة المتصفح.

صفحات العلامات وصنّاع المحتوى

صفحات تُبنى مسبقًا مع تحديث تدريجي، ودليل قابل للتصفية والترتيب.

مراجعات وتقييمات

قوائم مراجعات ومعدّلات تقييم تُبنى على الخادم فوق Supabase PostgreSQL، وتُكتب عبر Server Action مع تحقّق كامل.

حماية من الرسائل المزعجة

تحقّق Cloudflare Turnstile يُفرض على الخادم عند الإرسال.

بيانات منظّمة

بيانات JSON-LD لـ Organization و WebSite و Product و AggregateRating و Review و Person و BreadcrumbList في أنواع الصفحات المناسبة.

صور مشاركة لكل علامة

صور Open Graph تُولَّد لكل علامة على الحوسبة الطرفية.

الشاشات

دليل العلامات في Differeg مع تصفية حسب الفئة والترتيب
الدليل يعتمد على التصفية والترتيب، فيُعرض ديناميكيًا بينما تبقى صفحات العلامات ثابتة.
صفحة علامة في Differeg تعرض الوصف والصور ومراجعات العملاء
صفحات العلامات تُبنى مسبقًا مع تحديث كل 60 ثانية وتجلب المراجعات على الخادم، فتظهر التقييمات داخل HTML الأولي.
الصفحة الرئيسية لـ Differeg على شاشة هاتف

التقنيات

  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • Supabase (PostgreSQL)
  • Server Actions
  • Zod
  • Cloudflare Turnstile
  • Vercel

مؤكَّدة من الكود المصدري للمشروع نفسه.

ما الذي بنيناه

  • منصة ثنائية اللغة تعمل على Vercel، كل مسار فيها يرسل عنوانًا ووصفًا ورابطًا معياريًا وبيانات Open Graph و Twitter وبدائل hreflang وبيانات JSON-LD موضوعية.
  • خدمة مراجعات مبنية على جدول واحد وعرض تجميعي واحد — بلا طبقة API ولا ORM ولا مهام خلفية — مع فصل القراءة عن الكتابة بسياسات أمان الصفوف.
  • نموذج محتوى يعمل ببيانات أولية حتى إن لم يُضبط Supabase، فلا تتعطّل بيئات المعاينة ولا التطوير المحلي.
  • لا ننشر أرقام زيارات أو ترتيب لـ Differeg لأننا لم نتحقّق منها.

لديك منتج مشابه في ذهنك؟

أخبرنا بما تبنيه، وسنخبرك بصراحة إن كنا الفريق المناسب له.