مراجعة موقع لعميل

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

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

وللتوضيح عند التتنقل داخل الموقع بالضغط على الأزرار، تتولى مكتبة React Router عملية التنقل دون تحميل الصفحة من الخادم، بالضغط على زر تحديث وأنت في صفحة /about مثلاً، يقوم المتصفح بطلب ملف اسمه about من سيرفر Netlify، ولكن الملف غير موجود فعليًا لأن موقعك كله عبارة عن ملف index.html واحد، فيظهر خطأ 404.

لذا في مجلد public داخل المشروع أنشئ ملف جديد باسم:

 _redirects

 ويجب أن يبدأ الاسم بـ Underscore بدون أي صيغة، أي ليس .txt أو .html، فقط redirects_

وافتح الملف واكتب فيه السطر التالي فقط:

/*  /index.html  200

والحل السابق متعلق باستضافة Netlify، لكن الاستضافات الأخرى لها حل مختلف، بمعنى استضافات shared hosting مثل GoDaddy وخلافه تعتمد على خادم Apache،  وهنا يجب إنشاء ملف باسم htaccess. داخل المجلد الذي يحتوي على ملفات الموقع وهو public_html، وضع به الكود التالي:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>