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

SaaS Landing Pageحل المشكلات

حل المشكلات

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

Docker لا يعمل

ما تراه
failed to connect to the docker API at unix:///…/docker.sock; check if the path is correct and if the daemon is running

تعرض إصدارات Docker الأقدم الرسالة "Cannot connect to the Docker daemon" بدلًا من ذلك. وفي الحالتين، محرك Docker غير مُشغَّل.

  1. افتح Docker Desktop

    شغّل Docker Desktop وانتظر حتى يُظهر أن المحرك يعمل. على Linux، شغّل الخدمة: sudo systemctl start docker.

  2. تحقق من أن Docker يستجيب

    الطرفية
    docker info

    النتيجة المتوقعة: يطبع قسم Server بدلًا من رسالة خطأ.

  3. شغّل أمرك مجددًا

    docker build -t saas-landing .، ثم docker run -p 3030:3030 saas-landing.

المنفذ مستخدم بالفعل

ما تراه
ports are not available: exposing port TCP 0.0.0.0:3030 … bind: address already in use
Error: listen EADDRINUSE: address already in use :::3030

السطر الأول من Docker، والثاني من yarn dev أو yarn start. هناك برنامج آخر يستمع بالفعل على المنفذ 3030: غالبًا تشغيل سابق لهذا الموقع، أو خادم تطوير لمشروع آخر.

  1. اعرف ما الذي يشغل المنفذ

    على macOS أو Linux:

    الطرفية
    lsof -i :3030

    على Windows، في PowerShell:

    الطرفية
    netstat -ano | findstr :3030

  2. أوقفه

    أغلق ذلك البرنامج، أو أوقف التشغيل السابق: Ctrl+C في طرفيته، أو docker stop مع معرّف الحاوية من docker ps. ثم شغّل الموقع مرة أخرى.

  3. أو استخدم منفذًا آخر

    أبقِ البرنامج الآخر وشغّل الموقع على منفذ متاح، هنا 3041:

    طريقة التشغيلالأمر
    Dockerdocker run -p 3041:3030 saas-landing
    خادم التطويرyarn dev -p 3041
    بناء الإنتاجyarn start -p 3041

    مع Docker، غيّر الرقم الأول بعد -p فقط: الموقع داخل الحاوية يستمع دائمًا على 3030.

    النتيجة المتوقعة: يستجيب الموقع على localhost:3041محلي.

فشل البناء

يتوقف docker build بالرسالة "failed to solve" مع الخطوة التي فشلت؛ ويتوقف yarn build مع الخطأ نفسه. الأسباب المعتادة:

  • لا اتصال أو انتهت المهلة: ينزّل البناء الاعتماديات، وينزّل next build خطَّي Inter و Noto Sans Arabic من Google Fonts. تعني الرسالة "Failed to fetch Inter from Google Fonts" أن البناء لم يتمكن من الوصول إليهما. شغّل الأمر مجددًا بعد عودة الاتصال؛ ومع Docker، الخطوات المكتملة محفوظة في ذاكرة التخزين المؤقت.
  • `Invalid URL`: قيمة NEXT_PUBLIC_SITE_URL ليست عنوانًا كاملًا. اكتبها مع https://، مثل https://www.your-domain.com.
  • لا توجد مساحة كافية على الجهاز (No space left on device): حرّر مساحة في Docker Desktop، أو تحقق مما يستخدمه Docker بالأمر docker system df.
  • يفشل عند الخطوة نفسها في كل مرة: أعد البناء من دون ذاكرة التخزين المؤقت.
الطرفيةفي landing-page-template-2
docker build --no-cache -t saas-landing .

من دون Docker، احذف المجلدين node_modules و.next، ثم شغّل yarn install وyarn build مجددًا.

يقول Yarn إن إصداره 1.22

ما تراه
This project's package.json defines "packageManager": "yarn@4.8.1…". However the current global version of Yarn is 1.22…

يثبّت المشروع Yarn 4 عبر Corepack. تعني هذه الرسالة أن Corepack غير مفعّل بعد، فأجاب Yarn القديم المثبّت عامًّا بدلًا منه.

الطرفية
corepack enable

ثم شغّل yarn install مرة أخرى. إذا لم يكن مع Node.js لديك Corepack، فثبّته أولًا بالأمر npm install -g corepack. وإذا لم يُعثر على yarn إطلاقًا، فالأمر نفسه يحل المشكلة.

تغيير الإعداد لا يُحدث أي أثر

تُضمَّن قيمتا NEXT_PUBLIC_SITE_URL وNEXT_PUBLIC_API_BASE_URL في الصفحة عند بنائها. تغييرهما لا يغيّر شيئًا حتى يُبنى الموقع مجددًا.

طريقة التشغيلبعد تغيير قيمة
yarn devغيّره في .env.local، وأوقف الخادم، ثم شغّل yarn dev مجددًا.
yarn build وyarn startغيّره في .env.local، وشغّل yarn build مجددًا، ثم yarn start.
Dockerابنِ الصورة مجددًا مع القيمة كوسيط --build-arg. يتجاهل بناء الصورة .env و.env.local.
Vercelغيّره في Environment Variables الخاصة بالمشروع وانشر مجددًا.

بعض الصور مفقودة

  • صور آراء العملاء وصور بطاقات المدونة فارغة: تُحمَّل من images.unsplash.com، لذا تحتاج إلى اتصال بالإنترنت، على الجهاز الذي يقدّم الموقع أيضًا. كل الصور الأخرى موجودة في public/.
  • رسالة خطأ تقول إن اسم المضيف "is not configured under images in your `next.config.js`": استخدمت صورة من موقع غير مسموح به بعد. أضف مضيفه إلى images.remotePatterns في next.config.js، أو انسخ الصورة إلى public/.
  • صورة جديدة في `public/` لا تظهر: يبدأ مسارها في الكود من جذر الموقع، من دون public، مثل /images/your-photo.jpg. مع Docker، ابنِ صورة Docker مجددًا.

نموذج النشرة البريدية لا يعرض إلا رسالة الخطأ

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

  • تكون قيمة NEXT_PUBLIC_API_BASE_URL فارغة. لا يرسل النموذج شيئًا حتى تضبطها ويُبنى الموقع مجددًا.
  • تُجيب واجهة API الخاصة بك بخطأ، أو لا تُجيب على <NEXT_PUBLIC_API_BASE_URL>/newsletter/subscribe.
  • لا تسمح واجهة API الخاصة بك بعنوان الموقع في إعدادات CORS. عندها تعرض وحدة تحكم المتصفح خطأ CORS.

الصفحة تُفتح بالعربية

فتح / يرسل الزائر إلى /ar عندما يفضّل المتصفح العربية، وإلى /en في غير ذلك. اضغط زر اللغة في الترويسة، أو افتح /en مباشرة. لتبدأ دائمًا بالإنجليزية، أيًّا كانت لغة المتصفح المفضلة، أضف localeDetection: false بجوار locales في src/i18n/routing.ts.

زر أو رابط لا يفعل شيئًا

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

المجلد يبدو مختلفًا

شغّل الأوامر داخل المجلد الذي يُستخرج إليه ملف ZIP، أي landing-page-template-2. يحتوي على Dockerfile وpackage.json وyarn.lock وmessages وpublic وsrc. إذا لم يكن الأمر unzip متوفرًا، فاستخرجه بمدير الملفات بدلًا من ذلك؛ تضيف بعض الأدوات مجلدًا إضافيًا يحمل اسم ملف ZIP، فانتقل إلى المجلد الداخلي.

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

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

حل المشكلات

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

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