كنت دايما بشوف وبتواجهني مشاكل كتير مع NextJS من اول السيرفر اكشنز والكاشنج المتعب اوييي لحد المليون ايمبورت اللي بعملهم في كل صفحه للكومبوننتس يبقا الصفحه 100 سطر منهم 20 ايمبورتس طب ليه😂

خليني بقا كدا واحده واحده اقول اللي كان مواجهني في نيكست ورياكت وماحبتوش.

اولا كدا نتكلم على نقطه مهمه جدا ودي تقريبا كلنا بنشتغل عشانها الا وهي سوق العمل, سوق العمل طبعا معروف في رياكت ونيكست ودي يعتبر اللي بتدفع اغلب الناس تتعلمها وتشتغل بيها وسوق العمل فيها كبير جدا بجد والدعم والكوميونتي فيها كبير اوي اول حاجه سواء مكتبه كومبوننتس او مكتبه تحقق او او او دايما بتنزل دايما لرياكت ونيكست الاول بعدين للباقي وتلاقي الدوكيومنتيشن بيشير اوللل حاجه ل"ازاي تحمل لرياكت بروجكت او نيكست بروجكت"

ناخد كدا بقا نيكست ورياكت واحده واحده

ليه لسه مسيطر:

زي ماتكلمنا فوق عن سوق العمل والدعم.
الـ Server Components (RSC): فكرة جامدة صراحه وانها بتقلل الـ JavaScript اللي بيروح للمتصفح، وده بيخلي المواقع تقيلة حبتين بس سريعة في التحميل.
دعم Vercel: لو هترفع موقعك على Vercel، هتبقا كانك قاعد في عربيه تيسلا. كل حاجة متظبطة ومريحاك وعلى هواك من أول الـ Edge Functions لحد الـ Analytics.

العك اللي جابلي شلل بقا:

جحيم الـ Caching: نيكست بتكاش (Cache) كل حاجة بشكل متوحش صراحه. عندك 4 طبقات كاش، وعشان تعمل تحديث للداتا (Revalidate) ممكن تلبس في حيطة وتلاقي الداتا القديمة لسه بتظهر. (ليه 4 طبقات كاش ياجدعان لول مش موديلات عربيات دي). دا غير انهم معترفين بنفسهم ان الكاش كان Overwhelming وغيرو موضوع الكاشنج المتوحش بشكل ديفولت بس برضو متعب ووجع دماغ.
غابة الـ Hooks والـ Dependency Array: الـ useEffect والـ useMemo محتاجين مفتش مباحث بجد عشان تتأكد إنك حاطط كل المتغيرات صح، والا هتدخل في Infinite Loop يوقع السيرفر.
أخطاء الـ Hydration: الرعب اللي بيظهر في الـ Console لما حرف واحد يتغير بين السيرفر والكلينت، وحله بيبقى زي التدوير على ابرة في كوم قش.
التشتت في الملفات والـ Server Actions: عشان تعمل صفحة محتاج 5-6 ملفات (layout, page, loading, وغيره). والـ Server Actions ممكن تسرب بيانات حساسة لو مش واخد بالك إنها بقت Public API.
الـ Request Waterfalls: المكونات بتستنى بعضها في الـ Fetching فالموقع يبان بطيء لو معملتش Parallel Fetching يدوي.

بقالي فتره بقا بجرب حاجه كدا كنت مستقل بيها في بداية مسيرتي "المبتدئه والبسيطه جدا😂" في الاول الا وهي VueJS and NuxtJS (والله حتى لسا مش عارف انطقها نوكست ولا ناكست ولكن خليني اقولها نوكست) المهم, انا اتصدمت بجد من الجمال, خد عندك سهوله, بساطه (مع الحفاظ عالمميزات الرهيبه مش معنى كدا انها فقيره), فريق عمل جبار, تجربه مبرمج اسطوريه فوق الخيال بجد (حسيت اني مطبلاتي جدا ولكن بجد كانت تجربه ممتعه) طبعا اغلب الside projects في نيكست ورياكت بتاعتي كانت فرونت اند لبورتفوليوز وستورز وSaaS والكلام دا ولكن قولت ان ابني البروتفوليو الحقيقي بقا بتاعي وانا بجرب فيو ونوكست وحرفيا طلعت بيه في 3 او 4 ايام هو الحاج دا , منغير ai نهائي والتجربه كانت ممتعه جدا والبروجكت ستراكشر الجديد بتاع نوكست كان اسطوري انا مش هقول مواصفات تقنيه اوي في الاستخدام زي ازاي فيو بتعمل كومبوننتس وبتدير الحاله والكلام دا ولكن انا هقول التجربه العامه عشان البوست مايطولش. هكتب مقال تقني تفصيلي بين دا ودا قريب هو حاليا في واحد في البلوج بوستز بتاعتي في البورتفوليو ولكن معموله بال ai كنت مديله اللي عايز اكتبه وكتبه بس برضو ai يع😂😂

نيجي بقا لفريق فيو ونوكست

ليه بقا عجبني؟ خد يافنان:

الـ DX وتجربة المطور: الـ Auto-imports بتخليك تنسى وجع دماغ الـ import. اكتب الكود واستخدمه فورا. والـ Nuxt DevTools دي "سحر" بيكشف لك كل تفصيلة في الموقع لا بجد كل تفصيله ياجدع حتى في ستور لكل الايكونز في العالم سواء هيرو ايكونز او لوسيد او ماتريال يو وغيرهه ويجيبلك الراوتس كلها وشجرة الكومبوننتس وحتى الميتا داتا بتاعتك بيخليك تحطها وطبعا احنا عارفين دا ازاي مهم في ال SEO واوقات كتير بننساه في مشاريعنا او مابنهتمش بيه اصلا (يمكن تبقا تافهه للبعض ولكن دي تجربتي الشخصيه يادوب كنت بحط اسم ووصف وشكرا) وحتى الستيت مانجمنت في الايكو سيستم دا مثلا اسمها بينيا بتظهرلك وبتتحكم فيها من الديفتولز.
الـ Reactivity : في Vue 3 مفيش dependency arrays. الـ Proxy-based reactivity بتعرف لوحدها إيه اللي اتغير وبتحدث الـ DOM بذكاء وهدوء.
الـ Vapor Mode: ده المستقبل اللي هيخلي Vue أسرع من أي حاجة تانية لأنه بيشيل الـ Virtual DOM تماما.
تنظيم Nuxt 4 الجديد: فولدر app/ الجديد لم الدنيا ونظف المشروع من زحمة الملفات اللي كانت موجودة قبل كدة وطبعا للباك اند او اي حاجه لها علاقه بالسيرفر بتتحط في `/server` .
محرك Nitro: بيخليك تشغل موقعك على أي سيرفر أو Edge Provider (زي Cloudflare ودا اللي رفعت عليه البورتفوليو وحاليا بشتغال على edu-platform رفعتها عليه بكل سهوله حرفيا) بضغطة زرار ومن غير تعديل كود وبيقدم presets وسريع والدنيا 100 فل و 14 😂.

مشاكل ضايقتني حبه:

الايكوسيستم أصغر: لو محتاج مكتبة "معقدة" جدا، ممكن تلاقيها لريأكت بس وتضطر تتصرف في Vue ولكن اغلب المكتبات اللي حاليا بنستخدمها زي shadcn اتعمل لها بورت ولكن اصلا مش محتاجها عشان نوكست عامله اسطوره اسمها NuxtUI فيها روقان وعظمه بجد وبقت مجانيه بعد استحواذ فيرسل عالتيم (الحمدلله استحوذت بس لكن السياسات زي ماهي وكمان الاستحواذ دا نتج عنه ان كل حاجه كانت بفلوس بقت مجانا زي نوكست ستوديو و نوكست ui).
فرص الشغل: الشركات الـ Enterprise لسه متمسكة بريhكت أكتر، فممكن تلاقي صعوبة شوية في البداية لو بتدور على شغل في شركات تقليدية.

خليت جيميناي يلخصلي الكلام دا كله في جدول:

وجه المقارنة	Next.js & React	Nuxt 4 & Vue 3
سهولة الكود	محتاج تركيز عالي (مانيوال)	سلكان ورفاهية (أوتوماتيك)
إدارة الحالة	Hooks معقدة و `useEffect`	`ref` و `reactive` بسيطة جدا
تنظيم الملفات	زحمة وملفات كتير لكل صفحة	منظم جدا في فولدر `app/`
الأمان	ريسك في الـ Server Actions	صريح وآمن بـ Server APIs
السرعة	ممتازة بس محتاجة مجهود يدوي	طيارة بفضل الـ Vapor Mode و Nitro

كان نفسي اكتب تفاصيل واكواد اكتر بس حاسس البوست طول جدا فهعمل كدا في البلوج بتاعتي واشاركها معاكم 😂

وطبعا حابب اشكر الباشمهندس مازن على الشغل العالي اللي بيعمله معانا والكورسات الجميله اللي بينزلها, كورس سمارت كود فادني جدا بجد وفيديوهاتي عدلت حاجات كتير في تفكيري كمهندس سوفتوير ^^

المجتمع الأكبر للعرب في مجال التك

5 ردود