← العودة إلى المعرفة
تطوير الويبNext.js

كيف بنيت هذا الموقع — القرارات والأسباب

جولة تقنية في الأدوات والقرارات التي شكّلت بنية هذا الموقع: Next.js، Tailwind، RTL، وما بينها.

·٦ دقائق قراءة

لبناء موقع شخصي، الخيارات لا تنتهي. WordPress، Notion، Framer، Ghost، أو إطار عمل كامل. اخترت Next.js App Router لأسباب محددة: أريد تحكماً كاملاً في التصميم، أريد أداءً جيداً بشكل افتراضي، وأريد أن يكون الموقع قابلاً للتوسع دون إعادة بناء.

RTL من اليوم الأول

القرار الأهم كان RTL من اليوم الأول. كثير من المطورين يبنون الموقع بالإنجليزية ثم يحاولون إضافة RTL لاحقاً — وهذا مضيعة للوقت. حين تبني RTL أولاً، تكتشف أن Tailwind يتعامل معه بشكل ممتاز مع خاصية dir="rtl" على عنصر html، والمكونات تُعكس تلقائياً دون تدخل يدوي.

Tailwind v4

اخترت Tailwind v4 رغم حداثته لأن طريقة @import "tailwindcss" الجديدة أبسط بكثير من ملفات الإعداد السابقة. ونظام CSS Variables في @theme يجعل تعديل الألوان والخطوط أمراً مركزياً وسهلاً.

الخط: IBM Plex Sans Arabic

للخط، اخترت IBM Plex Sans Arabic — خط مصمم أصلاً للعربية، هادئ، مقروء، ويعمل في بيئات رقمية بشكل احترافي. تحميله عبر next/font/google يجعله يُخزَّن محلياً دون طلبات خارجية.

المحتوى: من TypeScript إلى MDX

بدأت بكتابة المحتوى في ملفات TypeScript ثابتة — بسيط للبداية. ثم انتقلت إلى MDX لأكتب المقالات بـ Markdown مع إمكانية تضمين مكونات React داخل النص. هذا يفتح إمكانات كثيرة مستقبلاً: أمثلة تفاعلية، كتل كود مع syntax highlighting، وغيرها.

الاستضافة

النشر على Vercel — الخيار الطبيعي مع Next.js. كل push إلى main يُنشر تلقائياً.


الموقع ليس منتهياً — وربما لن ينتهي أبداً. هذا جزء من جماله.