كيف تطلق موقع SaaS بالإنجليزية والعربية باستخدام Next.js

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

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

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

الموقع التسويقي سريع البناء وبطيء الإطلاق حين تتأخر الإجابات عن هذه الأسئلة. احسمها أولًا.

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

المطلوب

Plainview أداة تحليلات صغيرة للمتاجر الإلكترونية. المنتج نفسه يُبنى بشكل منفصل. وما يحتاجه الفريق الآن هو موقعه العام:

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

كيف يغطي القالب هذه المتطلبات

الحاجة	أين تجدها	ما الذي تستخدمه
قصة المنتج ومعاينة لوحة التحكم	الموقع	أقسام الصفحة الرئيسية ومعاينة لوحة التحكم المبنية بالكود في الواجهة الرئيسية (hero)
الخطط والأسعار	الموقع	صفحة الأسعار وقسم الأسعار في الصفحة الرئيسية
المدونة	الموقع	صفحات المدونة؛ المقالات ملفات في القالب
التواصل والتسجيل وتسجيل الدخول	الموقع؛ والإرسال يحتاج خدمتك	نموذج التواصل، وصفحات المصادقة، ومربعات النشرة البريدية
الصفحات القانونية وصفحات الأخطاء	الموقع	صفحات الشروط والخصوصية وملفات تعريف الارتباط واللائحة العامة لحماية البيانات (GDPR) بنصوص مؤقتة، إضافة إلى تصاميم لأخطاء 401 و404 و500
الإنجليزية والعربية	الموقع	عنوانا /en و/ar، وملفات داخل messages/
البحث والمشاركة	الموقع	NEXT_PUBLIC_SITE_URL، وخريطة الموقع، وrobots.txt، وpublic/meta_image.png
الحسابات والمدفوعات	خدماتك الخاصة (غير مشمولة)	مزوّد تسجيل الدخول لديك، وخدمة النماذج، ونظام الدفع

قالب جاهز أم بناء من الصفر أم منشئ مواقع مستضاف

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

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

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

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

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

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

هذا الجدول مثال لـ Plainview، وليس وعدًا بشأن جدولك الزمني.

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

خطوة بخطوة

1. قرّر ما الذي ستربطه بنفسك

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

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

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

2. شغّل الموقع على حاسوبك

ثبّت Docker Desktop، ثم اتبع هذه الخطوات الفرعية.

2a. التنزيل. في حسابك على Aniq UI، افتح My templates ونزّل ملف ZIP.

انظر إلى صفحة My templates، حيث لكل قالب مشترى تنزيله الخاص.

2b. فك الضغط وافتح المجلد. فك ضغط الأرشيف وافتح الطرفية (terminal) داخل المجلد Nextjs-landing-page-template-2.

انظر إلى موقع الطرفية: يجب أن يحتوي المجلد على Dockerfile وpackage.json وmessages وpublic وsrc.

2c. ابنِ الصورة وشغّلها.

docker build -t analytics-landing .
docker run -p 3030:3030 analytics-landing

توقّع بضع دقائق للبناء الأول، مع ضرورة الاتصال بالإنترنت، لأن الاعتماديات تُثبَّت ويُبنى الموقع داخل الصورة.

انظر إلى سجل البناء وهو ينتهي قبل أن تشغّل الأمر الثاني.

2d. افتحه. اذهب إلى localhost:3030/en. إذا كان المنفذ مشغولًا، غيّر الرقم الأول بعد -p، كما في docker run -p 3041:3030 analytics-landing، وافتح localhost:3041/en. التعديلات لا تصل إلى حاوية قيد التشغيل: أعد بناء الصورة بعد تغيير أي ملف، لأنها تحتوي على نسخة ثابتة من كودك.

انظر إلى شريط العنوان: يُفتح الموقع على /en، أي أن اللغة جزء من كل رابط.

للتعديل، يكون Node.js أكثر راحة. ثبّت الإصدار 20.9 أو أحدث، وشغّل corepack enable مرة واحدة، ثم yarn install وyarn dev. يستجيب خادم التطوير أيضًا على المنفذ 3030 ويعيد التحميل عند كل حفظ.

انظر إلى الأمرين اللذين يحتاجهما المسار بدون Docker بعد تفعيل Corepack.

ما يسوء عادةً: Docker غير شغّال (شغّل Docker Desktop وانتظر)، أو منفذ مستخدم، أو Yarn يرد بالإصدار 1.22 لأن Corepack غير مفعّل، أو Node.js أقدم من 20.9. استخدم Yarn بدلًا من npm، لأن ملف القفل (lockfile) يُبقي تثبيتك على الإصدارات التي جرى اختبارها.

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

3. تجوّل في الموقع كله قبل أن تغيّر فيه شيئًا

اقضِ نصف ساعة في قراءة الموقع كزائر. افتح كل صفحة باللغتين: الرئيسية، والأسعار، والمدونة، ومقالًا من المدونة، والتواصل، وتسجيل الدخول، والتسجيل، ونسيت كلمة المرور، والصفحات القانونية الأربع، وصفحات الأخطاء على /error/401 و/error/404 و/error/500. كتابة عنوان غير موجود طريقة سريعة لرؤية صفحة 404.

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

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

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

4. أعطِه اسم Plainview ومظهره

الهوية موزعة على عدد قليل من الملفات، وكلها مذكورة في التوثيق:

• اسم الموقع وعنوانه ووصفه: الكتلة Metadata في messages/layout/en.json وar.json. لكل صفحة أخرى كتلة meta خاصة بها، مثل PricingPage.meta في messages/pricing/.
• الشعار: src/components/Logo.tsx. هو نص افتراضيًا (كلمة LOGO وعلامة مسجلة)، ويستخدم الرأس والتذييل وصفحات تسجيل الدخول هذا المكوّن نفسه. غيّر الكلمة، أو استبدل عنصري span بصورة من public/.
• سمة الألوان: defaultTheme في src/app/[locale]/layout.tsx. تأتي أربع سمات: أحادية اللون، وأزرق (الافتراضية)، وبنفسجي، وسماوي. لاستخدام لونك الخاص، عدّل سمة واحدة في src/Demo/ThemeColorSwitcher/themes.ts.
• أيقونة الموقع (favicon): src/app/favicon.ico. صورة المشاركة: public/meta_image.png، بمقاس 1200 في 630 بكسل.

مع yarn dev، تعرض لوحة عائمة معاينة للسمات الأربع. هي أداة تطوير فقط؛ ولا تتضمنها نسخ الإنتاج أبدًا. ولأن المتصفح يتذكر الاختيار الذي جرى في اللوحة، فإن هذا الاختيار يتقدم على defaultTheme أثناء التطوير. إذا لم تظهر سمتك الجديدة، فاخترها في اللوحة، أو امسح البيانات المخزنة لـ localhost:3030 في متصفحك.

الخطوط هي DM Sans للنص الإنجليزي مع Clash Display للعناوين، وNoto Sans Arabic مع Almarai للعربية. لتغيير خط من Google، استورده من next/font/google في التخطيط (layout) مع الإبقاء على اسم variable نفسه.

يعرض التذييل سطر حقوق النشر ورابط إشارة. الكلمات هي Footer.copyright وFooter.madeWith في ملفات رسائل التخطيط، والرابط في src/components/shared/layout/footer/components/BottomSection.tsx. غيّرها أو احذفها كما تشاء.

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

5. أعد كتابة الصفحة الرئيسية لمنتجك

الصفحة الرئيسية مجموعة أقسام: الواجهة الرئيسية (Hero)، وصف متحرك من شعارات الشركات، وخمس بطاقات ميزات متحركة، وثلاثة إحصاءات تعدّ تصاعديًا، والأسعار، وشهادات العملاء، وأسئلة شائعة مع بحث، وقسم "Where we work" فيه خريطة للعالم ومربع بريد إلكتروني. كل ما فيها محتوى تجريبي لمنتج تحليلات، ويطلب التوثيق منك استبداله قبل الإطلاق.

اعمل عليها قسمًا بقسم:

1. الواجهة الرئيسية (Hero). أعد كتابة العنوان ونصّي الزرين لتناسب دعوتك الوحيدة إلى اتخاذ إجراء.
2. صف الشركات. احذفه، أو املأه بعملاء وافقوا على ذكر أسمائهم.
3. بطاقات الميزات. أبقِ خمسًا، أو أقل. تصف كل واحدة فائدة واحدة في جملة أو جملتين.
4. الإحصاءات. تعدّ ثلاثة أرقام تصاعديًا عند ظهورها. احتفظ فقط بالأرقام التي تستطيع إثباتها، واستخدم أرقامًا حقيقية.
5. شهادات العملاء. احتفظ فقط باقتباسات حقيقية ومصرّح بها. وإلا فاحذف القسم.
6. الأسئلة الشائعة. استبدل الأسئلة العشرة بالأسئلة التي يطرحها العملاء المحتملون فعلًا، واستخدم التصنيفات.
7. Where we work. أبقِ الخريطة إن كان لديك أماكن تعرضها، أو اختصر القسم إلى مربع البريد الإلكتروني.

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

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

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

ما يسوء عادةً: ترك إحصائية تجريبية، مثل عدد مستخدمين لا يستطيع منتجك إثباته. يقرؤها الزوار كادعاء.

6. حدّد الخطط والأسعار

تظهر الخطط في مكانين: قسم الصفحة الرئيسية وصفحة /pricing. الخطط التجريبية، كلها بالدولار الأمريكي شهريًا، هي Starter ($29) وGrowth ($79، ومعلَّمة Most Popular) وEnterprise ($199). هذه قيم تجريبية لتستبدلها. تضيف صفحة الأسعار مفتاحًا للتبديل بين الشهري والسنوي، ثم جدول مقارنة يغطي 32 ميزة في خمس مجموعات، وقائمة أسئلة قصيرة، وكتلة ختامية تربط بصفحة التواصل.

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

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

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

ما الذي تتحقق منه: بدّل بين الشهري والسنوي واقرأ كل رقم في الصفحة مقابل قائمة أسعارك، باللغتين. ما يسوء عادةً: سعر شهري تغيّر في البطاقات ولم يتغير في ترويسة المقارنة.

7. أضف المدونة واكتب أول المقالات

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

المقالات ملفات في القالب، وليست سجلات في نظام إدارة محتوى. يحتفظ بها ملف بيانات مُنمَّط (typed) وملفات رسائل بالإنجليزية والعربية، وتأتي خمسة مقالات تجريبية مع أغلفتها في public/images/blog/. في حالة Plainview، يعني ذلك أن مطوّرًا يضيف كل مقال. وهذا يناسب فريقًا ينشر بضعة مقالات في الشهر. إذا أردت أن ينشر المحررون بأنفسهم، فاستبدل ملف البيانات بنظام إدارة محتوى من اختيارك.

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

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

8. افحص العربية صفحة بصفحة

كل عنوان موجود تحت /en و/ar. وعلى /ar يضبط التخطيط dir="rtl"، فتنعكس القوائم والبطاقات والأسهم والجداول. وفتح / يرسل الزائر إلى العربية إذا كان متصفحه يفضلها، وإلى الإنجليزية في غير ذلك.

تقع النصوص في سبعة مجلدات تحت messages/: home وlayout وpricing وblog وcontact وauth وlegal، في كل منها en.json وar.json. عدّل الاثنين معًا. إذا أضفت وسومًا، فاستخدم فئات منطقية مثل ms-2 وtext-start بدلًا من ml-2 وtext-left. اطلب من عربي أصيل أن يقرأ الصفحات المترجمة؛ فالقالب يترجم نصوصه التجريبية، ونصوص منتجك تحتاج العناية نفسها.

تستخدم عناوين العربية خط Almarai ويستخدم النص الأساسي Noto Sans Arabic، ويُختاران بحسب الاتجاه في src/styles/base.css. افحص الكلمات الإنجليزية الطويلة والأرقام داخل الجمل العربية، فالنص المختلط هو الموضع الذي تُظهر فيه التخطيطات من اليمين إلى اليسار عيوبها.

ما الذي تتحقق منه: كل صفحة غيّرتها، في /ar، بعرض هاتف. ما يسوء عادةً: نص جديد في en.json بلا نظير له في ar.json.

9. اربط النماذج

يتحقق القالب من صحة نماذجه ثم يعرض رسالة نجاح، لكن لا شيء يغادر المتصفح. ويشمل ذلك نموذج التواصل، ونماذج تسجيل الدخول والتسجيل ونسيان كلمة المرور، ومربعات النشرة البريدية والبريد الإلكتروني في التذييل والشريط الجانبي للمدونة وقسم "Where we work". وأزرار Google وGitHub وX في صفحات المصادقة لا تفعل شيئًا بعد.

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

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

ابحث أيضًا عن الروابط التي تشير إلى #: بعض روابط التذييل وأيقونات التواصل الاجتماعي أماكن مؤقتة لصفحاتك وحساباتك.

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

10. حدّد عنوانك وانشر الموقع

الإعداد الوحيد المهم هو NEXT_PUBLIC_SITE_URL: عنوانك العام، يبدأ بـ https:// وينتهي دون شرطة مائلة. تُبنى منه الروابط الأساسية (canonical)، وروابط تبديل اللغة، وخريطة الموقع، وrobots.txt، وبطاقات المشاركة. يُدمج في الكود عند بناء الموقع، لذا اضبطه في المكان الذي يجري فيه البناء. مع Docker، مرّره كوسيط بناء:

docker build --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com -t analytics-landing .

خياراتك للاستضافة:

• Vercel. ارفع المجلد إلى مستودع خاص (الترخيص لا يسمح بمشاركة الكود المصدري علنًا)، واستورده، وأضف NEXT_PUBLIC_SITE_URL مع ENABLE_EXPERIMENTAL_COREPACK بالقيمة 1. انشر، ثم أضف نطاقك.
• خادم Node.js. ثبّت، وابنِ بعنوانك، وشغّل. يستمع على 3030، لذا ضع Nginx أو Caddy أمامه لـ HTTPS. وعلى استضافة تختار المنفذ بنفسها، استخدم yarn start -p $PORT.
• Docker. ملف Dockerfile المرفق يبني صورة صغيرة تعمل بمستخدم بلا صلاحيات مسؤول.

بعد أن يصبح الموقع على الإنترنت، افتح /sitemap.xml على نطاقك وتأكد أن كل عنوان فيه يبدأ بنطاقك. اترك NEXT_PUBLIC_BUY_URL فارغًا؛ فعندما يُضبط، يعرض التذييل شريط "Buy This Template". وأخيرًا، استبدل النص التجريبي في الصفحات القانونية الأربع (الشروط والخصوصية وملفات تعريف الارتباط واللائحة العامة لحماية البيانات) بصياغة تناسب نشاطك، ويفضَّل أن يراجعها محامٍ. يأتي القالب بهذه الصفحات كنص تجريبي فقط.

يجمع الموقع بين Framer Motion وGSAP وWebGL، وهذا كثير من الحركة. افتحه على هاتف متوسط المواصفات قبل الإطلاق، واحذف بعض المؤثرات هناك إن بدا ثقيلًا.

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

التشغيل اليومي

بعد الإطلاق، يصبح العمل صغيرًا ومنتظمًا. هذه هي الروتينات التي سيتبعها Plainview.

نشر مقال في المدونة

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

تحديث الأسعار

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

إضافة نص لغة أو تغييره

اعثر على المجلد الصحيح تحت messages/ (home أو layout أو pricing أو blog أو contact أو auth أو legal)، وعدّل القيمة في en.json وar.json، وأبقِ المفاتيح كما هي، مع ترك أي كلمة داخل الأقواس المعقوفة دون مساس. أعد تشغيل yarn dev أو ابنِ من جديد، ثم افحص اللغتين. ولإضافة لغة جديدة كاملة، أضف رمزها إلى src/i18n/routing.ts وsrc/config/i18n.ts، وانسخ كل ملف رسائل في المجلدات السبعة، وأضفها إلى قائمة اللغات. تشمل الروابط الأساسية وخريطة الموقع اللغة الجديدة دون عمل إضافي.

روتينات أصغر

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

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

القالب عملية شراء لمرة واحدة بسعر يبدأ من $79. يغطي الترخيص عددًا غير محدود من المشاريع، بما فيها المواقع المبنية للعملاء، وتأتي التحديثات معه.

ما تدفعه فوق ذلك، كل بند بحسب أسعار مزوّده:

• الاستضافة. تصلح Vercel أو خادم Node.js أو أي استضافة تدعم Docker.
• اسم نطاق.
• الخدمات التي تربطها: مزوّد تسجيل دخول، وخدمة نماذج أو بريد إلكتروني، ومزوّد دفع لعملية الدفع (وهو يتقاضى رسومًا بحسب صفحة أسعاره).
• نظام إدارة محتوى، فقط إذا استبدلت المدونة القائمة على الملفات.
• مترجم للنص العربي، إذا لم يكن في الفريق من يكتبه.

ما هو مجاني: لا توجد قاعدة بيانات ولا سر لتشغيل الموقع، لذا لا يحتاج أول نشر إلا إلى إعداد العنوان.

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

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

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

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

أخطاء شائعة

الإطلاق والعنوان لا يزال على localhost

إذا لم يُضبط NEXT_PUBLIC_SITE_URL وقت البناء، تشير الروابط الأساسية وخريطة الموقع وبطاقات المشاركة إلى http://localhost:3030. اضبطه قبل أن تبني نسخة الإنتاج.

نماذج تبدو مكتملة لكنها لا ترسل شيئًا

كل نموذج يعرض نجاحًا دون أن يرسل. اربط كل واحد أو احذفه قبل أن يرى أحد الموقع.

ترك عملاء واقتباسات تجريبية في مكانها

صف الشعارات والشهادات محتوى تجريبي. استبدلهما بمواد حقيقية ومصرّح بها، أو احذف القسمين.

تغيير السعر في موضع واحد فقط

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

تعديل إعداد وقت البناء دون إعادة البناء

القيم التي تبدأ بـ NEXT_PUBLIC_ تُدمج وقت البناء. أعد بناء الصورة، أو شغّل yarn build من جديد، أو أعد النشر على Vercel.

نشر الصفحات القانونية التجريبية

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

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

كيف أطلق موقع SaaS بالإنجليزية والعربية باستخدام Next.js؟

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

هل أحتاج إلى خادم خلفي؟

ليس لتشغيل الموقع. ليس فيه قاعدة بيانات ولا خادم خلفي. تحتاج إلى خدمات فقط لما تربطه: تسجيل الدخول والنماذج والدفع.

هل يتضمن الدفع أو التحصيل؟

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

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

نعم، عبر next-intl. تنعكس القوائم والبطاقات والجداول في الصفحات العربية، بينما تبقى معاينة لوحة التحكم في الواجهة الرئيسية من اليسار إلى اليمين مثل لقطة شاشة لمنتج.

هل توجد لوحة إدارة محتوى للمدونة؟

لا. تُخزَّن المقالات في الكود، في ملف بيانات مُنمَّط إضافة إلى ملفات الرسائل، لذا ينشرها مطوّر. ويمكن لنظام إدارة محتوى أن يتولى الأمر إذا استبدلت ملف البيانات هذا.

هل أستطيع استخدامه للعملاء؟

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

هل أستطيع تغيير الألوان؟

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

هل هو جيد لمحركات البحث؟

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

هل الموقع ثقيل على الهواتف؟

يجمع بين Framer Motion وGSAP وWebGL، فهناك حركة كثيرة. جرّبه على هاتف متوسط المواصفات وخفّف المؤثرات إن بدا بطيئًا.

جرّبه بنفسك

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

هذا القالب أيضًا واحد من عشرة قوالب في Next.js Templates Bundle، إذا كنت تتوقع بناء أكثر من نوع واحد من المنتجات.