انتقل إلى المقال
Aniq-UI

SaaS Templateانشره على الإنترنت

انشره على الإنترنت

انشر الموقع على Vercel، أو على أي خادم يشغّل Node.js، أو كصورة Docker.

قبل النشر

اضبط NEXT_PUBLIC_SITE_URL على العنوان الذي سيكون لموقعك، مثل https://www.your-domain.com. يُضمَّن في الموقع عند بنائه، لذا يجب ضبطه في المكان الذي يجري فيه البناء، وليس فقط في المكان الذي يعمل فيه الموقع.

لا شيء آخر مطلوب: لا قاعدة بيانات ولا أسرار.

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

Vercel

  1. ضع المجلد في مستودع Git خاص

    ادفع المجلد Nextjs-landing-page-template-2 إلى مستودع خاص على GitHub أو GitLab أو Bitbucket. لا تسمح رخصتك بمشاركة الكود المصدري علنًا. يحتوي التنزيل بالفعل على ملف .gitignore يستبعد node_modules والبناء وملفات .env.

  2. استورده في Vercel

    في Vercel، أضف مشروعًا جديدًا من ذلك المستودع. سيتعرّف على Next.js؛ أبقِ إعدادات البناء الافتراضية.

  3. أضف متغيرات البيئة

    في قسم Environment Variables الخاص بالمشروع، أضف NEXT_PUBLIC_SITE_URL بعنوانك، وENABLE_EXPERIMENTAL_COREPACK بالقيمة 1 حتى يثبّت Vercel الاعتماديات بإصدار Yarn الذي يثبّته package.json.

  4. انشر

    ابدأ النشر، ثم أضف نطاقك في إعدادات Domains الخاصة بالمشروع.

    النتيجة المتوقعة: يفتح نطاقك الصفحة الرئيسية.

بعد تغيير أي متغير، انشر مجددًا: يحتفظ الموقع العامل بالقيم التي بُني بها.

أي خادم مع Node.js

على خادم يعمل بـ Node.js 20.9 أو أحدث، انسخ المجلد، ثم ثبّت وابنِ بعنوانك وشغّل:

الطرفيةفي Nextjs-landing-page-template-2
corepack enable
yarn install
NEXT_PUBLIC_SITE_URL=https://www.your-domain.com yarn build
yarn start

يمكنك أيضًا وضع القيمة في ملف .env.local داخل المجلد قبل yarn build. يعمل الموقع على المنفذ 3030. ضع أمامه خادم ويب مثل Nginx أو Caddy لنطاقك ولـ HTTPS، وأبقِ yarn start يعمل عبر مدير عمليات أو خدمة نظام.

المضيفون الذين يختارون المنفذ

يستمع yarn start دائمًا على 3030، حتى عندما يضبط المضيف متغير PORT. على مضيف يعطيك منفذًا، اجعل أمر التشغيل yarn start -p $PORT.

صورة Docker

يبني Dockerfile صورة صغيرة تقدّم الموقع بـ Node.js على المنفذ 3030، بمستخدم بلا صلاحيات إدارية. مرّر عنوانك عند البناء، ثم شغّلها في الخلفية حتى تعيد التشغيل مع الخادم:

الطرفيةفي Nextjs-landing-page-template-2
docker build -t analytics-landing --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com .
docker run -d --restart unless-stopped -p 3030:3030 analytics-landing

يمكن لأي مضيف يشغّل Dockerfile أن يبنيه كما هو. ضع خادم ويب أمام المنفذ 3030 لنطاقك ولـ HTTPS، كما في Node.js.

بعد أن يصبح على الإنترنت

  • افتح عنوانك مع /en و/ar وتحقق من اللغتين.
  • افتح /sitemap.xml و/robots.txt. يجب أن يبدأ كل عنوان فيهما بنطاقك، وليس بـ localhost. إن لم يكن كذلك، فلم يكن NEXT_PUBLIC_SITE_URL مضبوطًا عند بناء الموقع.

توقفت عند خطوة؟

ابحث عن الحل قبل أن تبدأ من جديد.

حل المشكلات

تفضيلات ملفات تعريف الارتباط

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