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

Web Design Agencyانشر الموقع على الإنترنت

انشر الموقع على الإنترنت

الإعدادان اللذان تضبطهما قبل البناء، ثم Vercel أو أي استضافة Node.js أو صورة Docker.

الإعدادان

كلاهما اختياري. من دون Docker يوضعان في .env.local، أو في متغيرات البيئة لدى الاستضافة.

المتغيرالقيمة الافتراضيةوظيفته
NEXT_PUBLIC_SITE_URLhttp://localhost:3030العنوان العام لموقعك، دون شرطة مائلة في آخره، مثل https://www.your-domain.com. يحدد الرابط الأساسي (canonical)، وروابط اللغات، وبطاقات المعاينة على الشبكات الاجتماعية.
NEXT_PUBLIC_API_BASE_URLفارغعنوان واجهة API التي تستقبل نموذج التواصل. القيمة الفارغة تعني أن النموذج لا يرسل شيئًا.

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

اضبط عنوانك قبل أول بناء عام

من دون NEXT_PUBLIC_SITE_URL، يشير الرابط الأساسي وروابط اللغات وبطاقات المعاينة إلى http://localhost:3030.

Vercel

  1. ضع الشيفرة في مستودع Git

    لا يحتوي الملف المحمّل على سجل Git. ابدأ سجلًا في المجلد، وأنشئ مستودعًا فارغًا على GitHub أو GitLab أو Bitbucket، وادفع إليه كما تعرض صفحته.

    الطرفيةفي landing-page-template-1
    git init
git add .
git commit -m "First version"

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

    في Vercel، اختر Add New ثم Project، واستورد المستودع. يتعرّف Vercel على Next.js؛ أبقِ إعدادات البناء كما هي.

  3. أضف الإعدادات

    في Environment Variables، أضف NEXT_PUBLIC_SITE_URL بعنوانك، وNEXT_PUBLIC_API_BASE_URL إذا كانت لديك واجهة API لنموذج التواصل. وأضف أيضًا ENABLE_EXPERIMENTAL_COREPACK بالقيمة 1، ليثبّت Vercel بإصدار Yarn 4 الذي يثبّته المشروع.

  4. انشر

    اضغط Deploy. وإذا غيّرت متغيرًا لاحقًا، فانشر مرة أخرى لتُبنى القيمة الجديدة.

    النتيجة المتوقعة: يفتح Vercel موقعك على عنوانه في vercel.app. أضف نطاقك الخاص من Settings ثم Domains، واضبط NEXT_PUBLIC_SITE_URL عليه.

    تواجه مشكلة؟

أي استضافة Node.js

على خادم أو استضافة فيها Node.js 22 أو أحدث: اضبط القيمتين في .env.local أو في بيئة الاستضافة، ثم ثبّت وابنِ وشغّل.

الطرفيةفي landing-page-template-1
corepack enable
yarn install
yarn build
yarn start
  • يستمع yarn start على المنفذ 3030 مهما كانت قيمة PORT. على استضافة تعطي تطبيقك منفذه في PORT، مثل Railway أو Render، اجعل أمر التشغيل yarn start -p $PORT.
  • أبقِ العملية تعمل بمدير العمليات لدى استضافتك، وضع أمامها خادم ويب مثل Nginx أو Caddy لتوفير HTTPS على نطاقك.

صورة Docker

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

الطرفيةفي landing-page-template-1
docker build -t agency-portfolio --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com .

ثم شغّلها على الخادم. يُبقيها -d في الخلفية، ويعيد --restart unless-stopped تشغيلها بعد إعادة تشغيل الخادم:

الطرفية
docker run -d --restart unless-stopped -p 3030:3030 agency-portfolio
  • لا يغيّر docker run -e NEXT_PUBLIC_SITE_URL=… شيئًا: كُتبت القيمة وقت البناء. ابنِ الصورة من جديد مع --build-arg الجديد.
  • داخل الحاوية يستمع الموقع على 3030. وجّه خادم الويب إلى المنفذ الموجود على يسار -p.

قبل النشر للعموم

  • اضبط NEXT_PUBLIC_SITE_URL على عنوانك.
  • استبدل المحتوى التجريبي: المشاريع وآراء العملاء والأسعار والبريد الإلكتروني والهاتف والعنوان كلها أمثلة.
  • اجعل للأزرار ولروابط التواصل الاجتماعي والروابط القانونية وجهات حقيقية: فهي تأتي من دون وجهة، أو بالقيمة #.
  • اربط نموذج التواصل بواجهة API الخاصة بك أو احذفه: من دونها لا تصل الرسائل إلى أي مكان.
  • غيّر اسم المؤلف في generator داخل src/app/[locale]/layout.tsx، والأسماء في public/site.webmanifest، وصورة المعاينة public/image.png.

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

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

حل المشكلات

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

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