كيف تبني موقع وكالة عقارية بـ Next.js مع قوائم ولوحة إدارة

يشرح هذا الدليل كيف تبني موقع وكالة عقارية بـ Next.js، مع قوائم عقارات ولوحة إدارة للوكلاء وواجهة API تربط بينهما. نستخدم قالب Velra نقطة بداية، ونتابع وكالة افتراضية من أول تثبيت حتى الإطلاق.

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

المطلوب

Sandstone Realty وكالة صغيرة في دبي فيها خمسة وكلاء. تبيع وتؤجر شققًا وفيلات ومنازل متلاصقة، وتأتي معظم استفساراتها من أشخاص يتصفحون من الهاتف بالإنجليزية أو بالعربية. يحتاج الموقع الجديد إلى ما يلي:

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

هناك حقيقتان تحددان المثال. القالب يسعّر بدرهم الإمارات (AED) ويستخدم المنطقة الزمنية Asia/Dubai، وهو موقع لجذب العملاء المحتملين: ليس فيه خطوة دفع ولا إرسال بريد إلكتروني. وSandstone في دبي، فكلا الأمرين مناسب لها.

كيف يغطي القالب المطلوب

الحاجة	مكانها	ما تستخدمه
قوائم مع مرشحات	الموقع العام	صفحة العقارات، مع حفظ المرشحات والترتيب في عنوان الصفحة
صفحات العقارات	الموقع وواجهة API	معرض صور وبيانات ومرافق وحي وعقارات مشابهة
العقارات المحفوظة والمقارنة	الموقع	صفحة المحفوظات وصفحة المقارنة، وكلتاهما محفوظة في متصفح الزائر
طلبات المعاينة	الموقع واللوحة	نافذة المعاينة في كل عقار، وصفحة المعاينات
إضافة القوائم ونشرها	لوحة الوكالة	قائمة العقارات ومحرر بتبويبين بالإنجليزية والعربية، مع صور مرتبة وحالات
استفسارات الزوار	اللوحة	صفحة العملاء المحتملين (Leads)، مع حالة وملاحظة لكل استفسار
صور الغرف المجهّزة	اللوحة والموقع	استوديو التجهيز، وشريط المقارنة قبل وبعد في صفحة العقار
الإنجليزية والعربية	التطبيقات الثلاثة	المسارات /en و/ar وملفات الرسائل ومحرر عقارات ثنائي اللغة

قبل أن تبدأ: قرارات عليك اتخاذها

قيمة موقع القوائم من قيمة القرارات التي يقوم عليها. احسم هذه الأمور أولًا.

• أي حزمة. Full Stack للوكالة الجديدة. الواجهة الأمامية وحدها تحتاج إلى API في مكان ما.
• أين يعمل. استضافة Node لثلاثة تطبيقات، وقاعدة بيانات (SQLite على قرص دائم، أو MySQL)، ومكان للصور (مجلد دائم أو bucket مثل Cloudflare R2).
• السوق. القالب مضبوط على AED والمنطقة الزمنية Asia/Dubai، مع صياغة خاصة بدبي في بعض الرسائل. أي سوق آخر يعني تعديلات.
• اللغات. يُكتب كل عقار بالإنجليزية والعربية، فخطط لمن يكتب العربية ومن يراجعها.
• أدوات الذكاء الاصطناعي. التجهيز يحتاج إلى مفتاح Google Gemini. ويعمل المساعد بمفتاح من Gemini أو OpenAI أو DeepSeek. قرر هل ستستخدم أيًّا منهما، ومن يدفع للمزوّد.
• كيف يُرد على العملاء المحتملين. لا توجد خدمة بريد ولا دفع، فقرر من يتابع الإشعارات ومن يرد، ومن أي بريد أو هاتف.
• من له أي دور. المالك، والوكلاء، ومن يحتاج دورًا محدودًا مثل المصوّر.
• ما الذي يُعد قائمة. اتفقوا على طريقة التعامل مع العقارات المباعة والمؤجرة والمؤرشفة قبل أن يصبح عندكم خمسون عقارًا.

خطوة بخطوة

الخطوة 1: اختر الحزمة

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

تناسب الحزم المنفردة حالات أخرى. فالوكالة التي لديها API بالفعل، أو المطوّر الذي يريد استبدال أحد الجانبين، يمكنه أخذ الموقع العام أو لوحة الوكالة منفصلين. وتذكّر شكل المنتج: إنه يخدم وكالة واحدة، وليس بوابة تنشر فيها وكالات كثيرة قوائمها الخاصة.

تحقق قبل المتابعة

تعرف أي ملف ZIP بين يديك وأي تطبيقات يحتوي عليها، وأين ستعمل واجهة API إن كانت عندك واجهة أمامية فقط.

ما الذي يسوء عادةً

الواجهة الأمامية المنفردة لا تعرض شيئًا بدون API، لأن أيًّا من التطبيقين لا يحتفظ ببياناته.

الخطوة 2: شغّله محليًا بـ Docker

ثبّت Docker Desktop، ونزّل ملف ZIP من قوالبي (My templates)، وفك ضغطه، وافتح الطرفية في المجلد velra-real-estate-full-stack. ثم شغّل التطبيقات الثلاثة:

docker compose up --build

لا تحتاج إلى أي إعداد في هذا التشغيل الأول. يبني ثلاث صور ويحمّل وكالة تجريبية في قاعدة البيانات، فاترك له بضع دقائق. يُفتح الموقع العام على http://localhost:3030 (والعربية على /ar)، ولوحة الوكالة على http://localhost:3031، وواجهة API على http://localhost:8000. إذا كان منفذ مشغولًا، ضع SITE_PORT أو ADMIN_PORT أو API_PORT في ملف .env بجانب docker-compose.yml وأعد تشغيل الأمر.

سجّل الدخول إلى اللوحة بالبريد admin@velra.example وكلمة المرور Admin@123، أو كوكيل بالبريد agent@velra.example وكلمة المرور Agent@123. الموقع العام ليس فيه تسجيل دخول إطلاقًا.

في الوكالة التجريبية 17 عقارًا (15 منشورًا ومسودتان)، و6 أحياء، وغرفتان مجهّزتان معتمدتان، و5 استفسارات، و8 طلبات معاينة. تصفح الموقع أولًا كزائر، وأرسل لنفسك طلب معاينة، ثم افتح المعاينات في اللوحة كوكيل. هذه الدورة الواحدة تعرض المنتج كله في دقيقتين.

في هذه اللقطة من فيديو التثبيت، انظر إلى الأمر الواحد الذي يشغّل التطبيقات الثلاثة.

انظر إلى الغرفة الفارغة بجوار نسختها المفروشة بالذكاء الاصطناعي، وهي المقارنة التي يراها الزوار في الصفحة الرئيسية.

للإيقاف اضغط Ctrl+C. بياناتك محفوظة في وحدة التخزين velra-data، والأمر docker compose down -v يحذفها، وبعدها يحمّل التشغيل التالي وكالة تجريبية جديدة.

تحقق قبل المتابعة

العناوين الثلاثة تستجيب، وقد أرسلت لنفسك طلب معاينة ورأيته ضمن المعاينات في اللوحة.

ما الذي يسوء عادةً

Docker لا يعمل: شغّل Docker Desktop وأعد المحاولة. والمنفذ المشغول ينهي التشغيل برسالة "address already in use": انقل التطبيق بمتغيرات المنافذ أعلاه. وبدون Docker تحتاج التطبيقات إلى Node.js 22 أو أحدث، ويظل Yarn 1.22 هو الذي يستجيب إلى أن تنفذ corepack enable.

الخطوة 3: اجعله باسم Sandstone

الهوية البصرية موجودة في أماكن قليلة يمكن توقعها. في مجلد الموقع، يحتوي src/config/brand.config.ts على الاسم وبريد التواصل والسوق. ويحتوي src/styles/theme-variables.css على كل لون كرمز (token) له قيمة فاتحة وأخرى داكنة، فغيّر اللون الأساسي في الكتلتين. ملفات الشعار في public/brand/، وتقدّم واجهة API صور الوكالة الخاصة من public/media/velra/site/.

تذكر عدة جمل اسم العلامة التجريبية ومدينتها. ابحث في messages/ عن Velra وDubai (وعن كتابتهما بالعربية) وأعد كتابة تلك الأسطر باللغتين. أما بيانات الوكالة التي يقرؤها الزوار فهي بيانات تُحرَّر من اللوحة: اسم الوكالة وشعارها ووصفها وبريد التواصل والمدينة، ضمن الإعدادات ثم الوكالة. وأخيرًا أعد كتابة صفحة الخصوصية. فهي نص مؤقت لوكالة افتراضية، وتذكر الصفحة ذلك إلى أن تزيل العلامة.

تحقق قبل المتابعة

اسم الموقع والتذييل والعناوين كلها باسم Sandstone باللغتين، ولا تذكر أي صفحة Velra أو مدينة النسخة التجريبية.

ما الذي يسوء عادةً

لون غُيّر في سمة واحدة فقط، أو نص عربي نُسي في ملفات الرسائل، أو نص الخصوصية المؤقت منشور كما هو.

الخطوة 4: أضف الأحياء والعقارات

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

للمحرر أربعة تبويبات:

• التفاصيل: العنوان والوصف بالإنجليزية والعربية، والغرض (بيع أو إيجار)، والنوع (شقة أو فيلا أو منزل متلاصق)، والسعر، والبيانات والمرافق.
• الوسائط: حتى 30 صورة، مرتبة بالسحب، مع صورة واحدة محددة كغلاف.
• الموقع: المدينة والحي والعنوان ودبوس على الخريطة، يُحدَّد دقيقًا أو تقريبيًا. يجد البحث المكان نيابةً عنك.
• SEO: عنوان البحث ووصفه، وslug العنوان، والملاحظات الداخلية.

تُسعَّر الإيجارات سنويًا، والسعر مبلغ بالدرهم AED. والحالات أوسع من مسودة ومنشور: يمكنك وسم العقار بأنه مباع أو مؤجر أو مؤرشف، وكل واحدة من هذه تخفيه عن الموقع مع الإبقاء على سجله. استخدم الموقع التقريبي للعقارات التي لا يريد مالكها نشر الدبوس الدقيق.

أنهِ بالإعدادات ثم الصفحة الرئيسية، حيث تختار العقارات الثلاثة المميزة بالترتيب. وإذا لم يكن أي منها منشورًا، تعود الصفحة الرئيسية إلى العقارات المنشورة الموسومة بأنها مميزة.

انظر إلى معرض الصور والبيانات الرئيسية وبطاقة المعاينة، وكلها تُملأ من تبويبات المحرر أعلاه.

تحقق قبل المتابعة

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

ما الذي يسوء عادةً

الصور لا تُحمَّل، لأن عناوينها تأتي من PUBLIC_MEDIA_URL ويجب أن تصل إلى واجهة API من متصفح الزائر. وهناك فخ آخر هو حذف عقار، فيزول أيضًا من اللوحة. أرشفه بدلًا من ذلك إذا قد تحتاج إليه لاحقًا.

الخطوة 5: جرّب التجهيز بالذكاء الاصطناعي على غرفة فارغة

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

في الموقع، تعرض صفحة العقار بعدها شريط مقارنة قبل وبعد مع وسم الذكاء الاصطناعي على الصورة المفروشة. أبقِ هذا الوسم. فهو يخبر المشترين بما يشاهدونه، ويبقيك في جانب التسويق الصادق.

يعمل الاستوديو بـ Google Gemini، فيحتاج إلى GOOGLE_API_KEY في ملف .env الخاص بواجهة API. وبدونه يذكر الاستوديو أنه يحتاج إلى مفتاح ولا يُحتسب أي مبلغ. تحاسب Google وفق أسعارها الخاصة، المنشورة في صفحة أسعار Gemini.

انظر إلى شريط قبل وبعد والوسم الذي يبيّن أن الصورة المفروشة مولّدة بالذكاء الاصطناعي.

تحقق قبل المتابعة

افتح العقار المجهّز كزائر واسحب الشريط. تأكد أن وسم الذكاء الاصطناعي ظاهر.

ما الذي يسوء عادةً

يطلب الاستوديو مفتاحًا. فهو يولّد عبر Google فقط، لذا يلزم GOOGLE_API_KEY أيًّا كان المفتاح الآخر المضبوط. ضعه في .env الخاص بواجهة API، وليس في ملف من الواجهة الأمامية، ثم أعد تشغيل API.

الخطوة 6: قرر كيف تُعالَج الاستفسارات والمعاينات

هناك طريقتان يصل بهما الزائر إلى الوكالة. يُنشئ نموذج التواصل استفسارًا، فيه اختيار شراء أو إيجار، ومنطقة مفضلة، وميزانية، ورسالة. وتطلب نافذة المعاينة في صفحة العقار اسمًا وبريدًا إلكترونيًا وهاتفًا اختياريًا وتاريخًا ووقتًا. يختار الزوار موعدًا بين 09:00 و18:00 بتوقيت دبي، بفواصل نصف ساعة، وقبل ساعة على الأقل من الآن.

انظر إلى حقلي التاريخ والوقت، وإلى أن النافذة تطلب وقتًا مفضلًا وليس موعدًا مؤكدًا.

انظر إلى صياغة الانتظار التي يراها الزائر بعد ذلك، وهي توضح أن الوكالة لم تؤكد بعد.

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

ولأن القالب لا يرسل بريدًا إلكترونيًا، على الوكالة أن تقرر كيف يصل الرد إلى الزائر. أبسط قاعدة لـ Sandstone أن يرد الوكيل من بريد الوكالة أو هاتفها فور تأكيد الطلب، وأن يذكر الموقع ذلك قرب النموذج. يقبل النموذجان خمسة إرسالات لكل عنوان خلال عشر دقائق ويتجاهلان حركة الروبوتات، حتى لا تغرق أول رسائل حقيقية في الرسائل المزعجة.

تحقق قبل المتابعة

أرسل طلب معاينة ونموذج تواصل. تأكد أن الأول يظهر ضمن المعاينات كمطلوب وأن الثاني يظهر ضمن العملاء المحتملين (Leads) كجديد، ومع كل منهما إشعار.

ما الذي يسوء عادةً

يُرفض نموذج بعد بضع محاولات. يقبل النموذجان خمسة إرسالات لكل عنوان خلال عشر دقائق، وخلف وكيل (proxy) قد يبدو الجميع كعنوان واحد إلى أن تضبط TRUST_PROXY.

الخطوة 7: أضف الفريق وحدد صلاحياته

لا توجد صفحة تسجيل: أول حسابين في اللوحة يأتيان من البيانات الأولية. يستطيع المدير العام (Super Admin) فعل كل شيء. أما دور الوكيل فهو أضيق: العقارات والاستفسارات والمعاينات والتجهيز وقائمة الأحياء، دون الإعدادات أو حسابات الإدارة أو الأدوار أو المساعد. أنشئ الحسابات الحقيقية ضمن إدارة المشرفين، ثم استبدل كلمات المرور التجريبية أو احذف الحسابات الأولية قبل أن تصبح اللوحة مكشوفة على الإنترنت.

في Sandstone يحتفظ المالك بدور المدير العام، ويأخذ الوكلاء الخمسة دور الوكيل، ويحصل مصوّر بدوام جزئي على دور مخصص. ضمن أدوار المشرفين تحدد فقط ما يحتاجه هذا الشخص، مثل properties.view وproperties.edit وصلاحيات التجهيز.

تحقق قبل المتابعة

سجّل الدخول كوكيل وتأكد من غياب الإعدادات وصفحات الإدارة والمساعد. وسجّل الدخول بدور المصوّر وتأكد من ظهور العقارات والتجهيز فقط.

ما الذي يسوء عادةً

تبقى كلمات المرور الأولية كما هي. غيّرها قبل أن تصبح اللوحة مكشوفة على الإنترنت.

الخطوة 8: فعّل المساعد إن أردت

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

يحتاج إلى مفتاح مزوّد واحد في ملف .env الخاص بواجهة API، من Google Gemini أو OpenAI أو DeepSeek، باسم GOOGLE_API_KEY أو OPENAI_API_KEY أو DEEPSEEK_API_KEY. يكفي أي واحد. وبدون مفتاح يذكر أنه يحتاج إلى واحد ولا يُحتسب أي مبلغ. ويحاسب كل مزوّد وفق أسعاره الخاصة.

انظر إلى الرسم البياني الذي يرسمه المساعد من معاينات الوكالة نفسها.

تحقق قبل المتابعة

اسأل المساعد عن شيء يمكنك التحقق منه في صفحة العملاء المحتملين (Leads)، مثل عدد الاستفسارات الجديدة، وراجع إجابته.

ما الذي يسوء عادةً

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

الخطوة 9: اختبره على الهاتف وبالعربية

تبدأ معظم عمليات البحث عن العقارات من الهاتف. افتح الموقع على هاتف، وابحث، وافتح عقارًا، وأرسل طلب معاينة. في تخطيط الهاتف يبقى شريط معاينة ثابت أسفل صفحة العقار. احفظ عقارين وقارن بينهما، ثم حاول إضافة عقار رابع إلى المقارنة، فيرفض الموقع ذلك لأن الحد ثلاثة.

انظر إلى العقارات الثلاثة في جدول واحد، وهذا أقصى ما يستطيع الزائر مقارنته في المرة الواحدة.

انظر إلى شريط المعاينة الذي يبقى أسفل شاشة الهاتف أثناء تمرير الصفحة.

كرر الاختبار بالعربية على /ar، وفي اللوحة. تأكد أن النص العربي والمرشحات وتسميات الخريطة تبدو سليمة عند الانعكاس. تأتي بلاطات الخريطة في اللوحة من OpenFreeMap والبحث عن الأماكن من خدمة عامة، فاختبرها باتصال بالإنترنت.

تحقق قبل المتابعة

نفّذ قائمة اختبار على هاتف: ابحث، وافتح عقارًا، واحفظ عقارين، وقارن بينهما، واطلب معاينة، ثم أكدها كوكيل.

ما الذي يسوء عادةً

يذكر الموقع أنه تعذر تحميل شيء. في وحدة تحكم المتصفح، تعني رسالة CORS أن عنوان الواجهة الأمامية غير موجود في CORS_ORIGIN. كذلك فإن تبويب صفحة عقار يظهر فيه "Property details" عند العمل بـ Docker لا ضرر منه: فخادم الموقع نفسه لا يستطيع الوصول إلى API على localhost من داخل الحاوية، وحزمة full stack تضبط العنوان الداخلي الصحيح أصلًا.

الخطوة 10: انشر الموقع

يمكنك النشر بثلاث طرق: خادم واحد يشغّل Docker Compose خلف وكيل عكسي (reverse proxy) لـ HTTPS، أو كل تطبيق من Dockerfile الخاص به على استضافة مثل Railway أو Render، أو Node.js مباشرة. وللوكالة الصغيرة يكون الخادم الواحد أبسط. ضع العناوين العامة الثلاثة في ملف .env بجانب docker-compose.yml باسم SITE_URL وADMIN_URL وAPI_URL، وتُشتق منها الأصول المسموح بها وعناوين الصور.

• ابنِ الموقع واللوحة بعناوين عامة. القيمتان NEXT_PUBLIC_API_BASE_URL وبقية قيم NEXT_PUBLIC_* تُجمَّع داخل الصفحات، لذا يحتاج أي تغيير إلى إعادة بناء.
• اضبط NODE_ENV=production وJWT_SECRET الخاص بك وCORS_ORIGIN. لن تبدأ واجهة API في الإنتاج بدون سر مناسب وقائمة أصول.
• أنشئ الجداول مرة واحدة في إعداد الإنتاج بالأمر yarn seed:prod (وكالة تجريبية) أو yarn db:sync:prod (جداول فارغة بلا حسابات). مع الجداول الفارغة ما زلت تحتاج إلى أول مشرف، لذا ابدأ بالوكالة التجريبية واستبدل بياناتها.
• احفظ ملف SQLite والملفات المرفوعة على تخزين دائم، أو استخدم MySQL وbucket مثل Cloudflare R2.
• اضبط NEXT_PUBLIC_SITE_URL على عنوان الموقع الحقيقي للروابط الأساسية (canonical) وخريطة الموقع.
• اضبط TRUST_PROXY خلف الوكيل العكسي كي تحسب حدود كل زائر الزائر الحقيقي.

لا تنفذ أبدًا yarn setup:fresh ولا yarn db:reset على وكالة فيها قوائم حقيقية. كلاهما يحذف كل الجداول.

تحقق قبل المتابعة

في نافذة خاصة، اطلب معاينة على الموقع المنشور وتأكد أنها تصل مع إشعار.

ما الذي يسوء عادةً

تبقى الصفحات فارغة لأن العناوين الحقيقية غير موجودة في CORS_ORIGIN، أو تفشل الصور لأن NEXT_PUBLIC_MEDIA_HOSTNAME لا يذكر مضيفها. أعد بناء الواجهات الأمامية بعد تغيير أي قيمة NEXT_PUBLIC_*.

إدارته يومًا بيوم

هذا أسبوع عادي في Sandstone، باستخدام شاشات موجودة أصلًا في اللوحة.

صباح في اللوحة

تعرض النظرة العامة العقارات والاستفسارات والمعاينات في صورة موجزة، مع خريطة للعقارات. ابدأ بجرس الإشعارات الذي يجمع الاستفسارات الجديدة وطلبات المعاينة.

انظر إلى أعداد الاستفسارات الجديدة والمعاينات المطلوبة، فهي التي تحدد من يتصل به الوكلاء أولًا.

افتح العملاء المحتملين (Leads) بعد ذلك. لكل استفسار حالة (جديد أو تم التواصل أو مؤهل أو مغلق) وملاحظة. انقله إلى الحالة التالية فور رد الوكيل، لتُظهر القائمة دائمًا من ينتظر.

انظر إلى لوحة التفاصيل بجانب القائمة، حيث توجد الحالة وملاحظة الوكيل.

إبقاء القوائم محدّثة

تعرض صفحة العقارات كل شيء مع تبويبات حالة وبحث ومرشحات. راجع المسودات الجاهزة للنشر، ووسم الصفقات المغلقة بأنها مباعة أو مؤجرة، وأرشف ما سُحب.

انظر إلى تبويبات الحالة في الأعلى، فهي تفصل القوائم الحية عن المسودات والصفقات المغلقة.

مهام أسبوعية

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

مثال على خطة إطلاق، أسبوعًا بأسبوع

هذا جدول مثال لـ Sandstone، وليس وعدًا بالمدة التي سيستغرقها مشروعك.

• الأسبوع 1، الأساسات. شغّل الحزمة بـ Docker، وأرسل لنفسك طلب معاينة، واتخذ القرارات المذكورة أعلاه، وابدأ الهوية البصرية وصفحة الخصوصية.
• الأسبوع 2، المحتوى. أضف الأحياء وأولى القوائم باللغتين مع صور مرتبة، وانشرها.
• الأسبوع 3، الأشخاص والأدوات. أنشئ الفريق والأدوار، وجرّب التجهيز على وحدة فارغة، واختبر على الهواتف وبالعربية.
• الأسبوع 4، الإطلاق. انشر على نطاقك، وأرسل طلب معاينة حقيقيًا، وأخبر العملاء السابقين أولًا.

قائمة التحقق قبل الإطلاق

• اسم الوكالة وشعارها وبريد التواصل والمدينة كلها لك، باللغتين.
• صفحة الخصوصية أُعيدت كتابتها لوكالتك وبلدك، وأُزيلت الملاحظة المؤقتة.
• لكل عقار منشور اللغتان وصور مرتبة وغلاف ودبوس محدد الموقع.
• كلمات المرور التجريبية استُبدلت أو الحسابات الأولية حُذفت.
• قيمة NODE_ENV هي production، وJWT_SECRET خاص بك، وCORS_ORIGIN يسرد العناوين المنشورة.
• NEXT_PUBLIC_SITE_URL هو عنوان الموقع الحقيقي، وأُعيد بناء الواجهتين الأماميتين.
• الصور وقاعدة البيانات على تخزين دائم، مع نسخة احتياطية.
• لا تُعتمد الصور المجهّزة إلا إذا كانت موسومة وصادقة.
• هناك من يتولى الإشعارات وعملية الرد.

قالب جاهز أم بناء من الصفر أم منصة مستضافة

هناك ثلاثة طرق واقعية للوصول إلى موقع وكالة.

قالب مثل هذا

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

البناء من الصفر

تحصل على المنتج الذي تصممه بالضبط، لكنك تبني كل شيء: المرشحات المحفوظة في العنوان، والمحرر بصوره المرتبة، ومسار المعاينة، والصلاحيات. وهذا طريق طويل لموقع تحتاجه وكالات كثيرة بشكل متقارب.

منصة عقارية مستضافة

تُطلق بسرعة وتتولى الخوادم عنك. مقابل ذلك رسوم متكررة، وتحكم أقل في التخطيط والمسار، وعملاؤك المحتملون يعيشون على نظامها. قارن الشروط والرسوم ودعم العربية أولًا.

كم يكلف التشغيل

القالب عملية شراء لمرة واحدة، بدءًا من $79 للموقع العام وحده. وحزمة Full Stack المستخدمة في هذا المثال بسعر $179، وتشمل ترخيصًا تجاريًا ودعمًا مدى الحياة.

تكاليف التشغيل خارج القالب:

• استضافة التطبيقات الثلاثة، وقرص دائم أو قاعدة بيانات MySQL.
• تخزين bucket، إذا رفعت الملفات إلى Cloudflare R2 أو خدمة مشابهة.
• اسم نطاق.
• مفتاح ذكاء اصطناعي، فقط إذا استخدمت استوديو التجهيز (Google Gemini) أو المساعد (Gemini أو OpenAI أو DeepSeek). ويحاسب المزوّدون وفق أسعارهم الخاصة.

مجاني الاستخدام: SQLite للتطوير، وبلاطات الخريطة والبحث عن الأماكن اللذان يشير إليهما القالب افتراضيًا، والبيانات التجريبية المرفقة. ولا يوجد مزوّد دفع تدفع له، لأن المنتج ليس فيه صفحة دفع.

ما الذي تخصصه بعد ذلك

• العملة والسوق. القالب مضبوط على AED ودبي. أي سوق آخر عمل مخصص، لأن العملة والمنطقة الزمنية وبعض الصياغات مضبوطة له.
• أنواع العقارات والمرافق. كل قائمة تعيش في واجهة API وتُسمّى في الواجهتين الأماميتين، لذا إضافة قيمة تعني تعديل التطبيقات الثلاثة.
• صفحات الأحياء. اكتب أوصافًا حقيقية وصور غلاف لكل منطقة، باللغتين.
• التتبع. أضف معرّف Google Tag Manager أو GA4 أو Meta أو TikTok أو Snapchat أو Pinterest إلى ملف .env للموقع وأعد البناء. يرسل الموقع أحداثًا مثل viewing_request وcontact_submit.
• الأدوار. أنشئ دورًا لكل وظيفة، مثل موظف استقبال يرى المعاينات دون القوائم.
• وكلاء البرمجة. توفر واجهة API أدوات المساعد على POST /api/mcp، محمية بمفتاح تختاره أنت.

أخطاء شائعة

نشر عقار دون التحقق من موقعه

دبوس في الشارع الخطأ يجعل القائمة تبدو مهملة. استخدم البحث عن الأماكن في تبويب الموقع، واختر تقريبي عندما يكون العنوان الدقيق خاصًا.

التعامل مع طلب المعاينة كأنه موعد محجوز

يخبر الموقع الزوار أن الطلب ينتظر التأكيد. وإذا تأخر الوكلاء في التأكيد فسيلاحظ الزوار ذلك. اتفقوا على مهلة للرد وراقبوا جرس الإشعارات.

نسيان وسم الذكاء الاصطناعي على الصور المجهّزة

وسم الذكاء الاصطناعي على الشريط موجود لسبب. لا تزله، ولا تعتمد صورة مجهّزة لغرفة تبدو مختلفة في الواقع.

توقع البريد الإلكتروني أو المدفوعات

القالب لا يرسل بريدًا ولا يقبل مدفوعات. خطط لكيفية رد الوكلاء، وأضف خدمة بريد بنفسك إذا احتجت إلى تأكيدات تلقائية.

تغيير ملف .env دون إعادة بناء الواجهات الأمامية

إذا ظل الموقع المنشور يستدعي واجهة API القديمة بعد تغيير عنوان، فأعد البناء. مع Docker Compose، اضبط القيمة في ملف .env بجانب docker-compose.yml ونفّذ docker compose up --build.

الأسئلة الشائعة

كيف أبني موقعًا عقاريًا بـ Next.js؟

ابدأ من قالب فيه بالفعل قوائم وصفحات عقارات وعملاء محتملون ومنطقة إدارة، ثم اضبطه لوكالتك. تحتاج إلى موقع عام ولوحة للوكلاء وواجهة API تخزن العقارات والاستفسارات. توضح الخطوات أعلاه هذا الطريق مع Velra.

هل أحتاج إلى خلفية (backend) لموقع قوائم عقارات؟

نعم، لأن القوائم والصور والاستفسارات والمعاينات يجب أن تُخزَّن وتُدار في مكان ما. يأتي القالب بواجهة API مبنية بـ NestJS وTypeORM يستخدمها التطبيقان، على SQLite أو MySQL.

هل أستطيع استخدامه لوكالات عميلة لي؟

نعم. يأتي بترخيص تجاري لعدد غير محدود من المشاريع، وهذا يشمل من يبنون مواقع لعملائهم. اقرأ صفحة الترخيص في التوثيق للاطلاع على الشروط بدقة.

هل يدعم العربية والكتابة من اليمين إلى اليسار؟

نعم. يعمل الموقع واللوحة بالإنجليزية والعربية، مع تخطيط العربية من اليمين إلى اليسار. وتُكتب العقارات باللغتين.

هل يستطيع الزوار الدفع أو الحجز عبر الإنترنت؟

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

هل تستطيع عدة وكالات النشر على موقع واحد؟

لا. هو مبني لوكالة واحدة بفريق واحد. أما بوابة لوكالات كثيرة فتحتاج إلى ميزات جديدة مثل حسابات الوكالات والفوترة.

هل أحتاج إلى Docker؟

لا، لكنه أسرع بداية. بدون Docker تحتاج إلى Node.js 22 أو أحدث، وتفعيل Corepack، وطرفية لكل تطبيق. تعمل واجهة API على SQLite، فلا يوجد خادم قاعدة بيانات لتثبيته.

هل يستطيع الزوار إنشاء حسابات؟

لا. الموقع ليس فيه حسابات. تبقى العقارات المحفوظة والمقارنة في متصفح الزائر، ويحتاج طلب المعاينة إلى اسم وبريد إلكتروني ووقت فقط.

هل أستطيع استخدام MySQL بدل SQLite؟

نعم، كتغيير في الإعدادات. أنشئ قاعدة بيانات فارغة، واضبط المشغّل والاتصال في ملف .env الخاص بواجهة API، ونفّذ التحميل الأولي أو إنشاء الجداول قبل أول تشغيل في الإنتاج.

هل وسم الصور المجهّزة اختياري؟

لا. تعرض صفحة العقار الغرف المجهّزة مع وسم واضح بأنها مولّدة بالذكاء الاصطناعي، ويجدر بك إبقاؤه.

جرّبه بنفسك

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