عبدالله المحسن
عبدالله المحسن
موقع شخصي وPortfolio مفتوح المصدر مبني بإستخدام Next.js ومدموج مع Sanity لإدارة المحتوى مع تصميم بسيط وعصري متجاوب مع مختلف الشاشات ويحتوي على مساحة للمشاريع والمدونة
عبدالله المحسن
يا هلا وسهلا!
قبل فترة ببساطة كنت أريد تحديث الموقع الشخصي (من هذا الشكل العام) إلى شكل جديد! وهو الموقع الذي تقرؤون منه حالياً! مع إضافة مدونة ومساحة للكتابة حول المشاريع والمنشورات.
لذلك بعد إعادة ترتيب شكل الموقع وإضافة نظام Sanity لإدارة المحتوى, وجدت أني قمت بعمل جيد ولله الحمد..."موقع شخصي وPortfolio مع مدوّنة ومساحة للكتابة حول المشاريع" ففكرت...ليش ما يصير متاح للعامة ومفتوح المصدر؟ خصوصاً أن البعض يريد "البساطة والحداثة" في نفس الوقت؟ فكرة!
يسعدني أن أشارك لكم MinimalNext Folio - وهو موقع شخصي وPortfolio حديث وبسيط تم إنشاؤه باستخدام Next.js وSanity CMS !
في هذا المشروع أردت أن أقوم بتجديد وتحديث التصميم وبناء مظهر جمالي أكثر نظافة وحداثة وبساطة مع تحسينات في تجربة المستخدم, وجعل الموقع متكيف مع احجام الشاشة المختلفة (Responsive Design)
ايضاً, إضافة نظام لإدارة المحتوى المكتوب, وذلك دمج نظام إدارة المحتوى Sanity لتسهيل عملية كتابة المحتوى. طريقة التدوين بإستخدام Sanity جداً جميلة وتتم من خلال المشروع الخاص بك! وتكون بإضافة (studio/) إلى دومين الموقع الخاص بالمشروع. سواءً كان ببيئة التطوير (http:localhost:3000/studio) و حتى دومين الموقع الخاص بك (https://your-domain.com/studio)
ملاحظة : للوصول إلى Sanity Studio من خلال دومين الموقع الخاص بك, لابد من إضافة الدومين كـ CORS Origin كما تم إضافة دومين بيئة التطوير (http://localhost:3000) . الطريق موجودة في الـ README الخاص بالمشروع تحت Sanity Setup في الخطوة الرابعة.
هذا المشروع يأتي بدعم كامل للغتين العربية والإنقليزية بإستخدام. يتم تخزين نصوص الموقع في ملفات JSON مرتبة ومنظمة. مما يُسهِّل تعديله أو إضافة لغاتٍ أخرى عند الحاجة.ببساطة قم بتعديل النصوص في ملفي الـ JSON وفي ملفّي ar.json و en.json بأي نص تريده, وستنعكس التغييرات تلقائيًا في الموقع!!
تم استخدام إطار العمل Next.js بدلاً من React سابقاً لعدة اسباب منها :
1- الأداء المحسّن - خصوصاً سرعة تحميل الصفحات الأولي + التحسين لمحركات البحث أوSearch Engine Optimization (SEO)
2- تجربة تطوير محسنّة - خصوصاً مع الـ App router والذي تم تقديمه في الإصدار الـ 13 من Next.js والذي يبسّط توجيه الصفحات (Routing) وتنظيم الصفحات
3- استخدام React Server Components - وذلك لتقليل ملفات الـ Javascript التي تصل لمتصفح المستخدم (Client-side) مما يساعد على تحسين الأداء و وتبسيط عملية إحضار البيانات وذلك بعمل Render من خلال السيرفر (وليس من خلال المتصفح أو الـ Client مثل React).
4- استخدام الـ Server Actions - لأجل نموذج (Form) التواصل. والي هو نموذج تواصل جهاز و Built-in لكن تحتاج خدمة توفر لك Endpoint يقوم بإرسال رسائل التواصل إلى بريدك مثل Formspree والي استخدمه شخصياً!
5- حل مشكلة الـ Dynamic Metadata - والي تحدثت عنها في مشروع موقع IE Home الإلكتروني وكيف أن React هو رح ينشئ مشروع ويب بصفحة واحدة فقط Single Page Application (SPA) .
ايضاً, تم استخدام مكتبة Next-intl لأجل دعم اللغات المتعدد, وهي مكتبة مصممة ومحسنّة خصيصاً لـ Next.js.
سأستمر بإذن الله في تطوير هذا المشروع بناء على أراء المستخدمين حول المشروع. بصراحة أردت أن يكون هذا المشروع موجهاً للكل..للتقنيين وغير التقنيين ولكن للأسف لم يحدث هذا (للآن) وسأسعى بإذن الله لتحقيق ذلك. ايضاً المشروع يحتاج أن يكون قابلاً للتخصيص أكثر مما هو عليه, لتوفير الخيارات للمستخدمين وعدم استخدام سمّات (Themes) محدودة.
عملية الإعداد بسيطة. قم عمل Clone للحزمة, وتنزيل الحُزَم المطلوبة, قم بربط مشروع Sanity الخاص بك وقم بتخصيص النصوص من خلال ملفات اللغات. الشرح المفصّل موجود في الـ README الخاص بالمشروع 👇
وبس 😗! المشروع كان شخصي تماماً...ولكن أتمنى حالياً أنه يعجبكم!
لا نستغني عن ملاحظاتكم واقتراحاتكم! ومنكم نستفيد 💡!
47 مشاهدة