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

تحميل من Google Playتحميل من App Store

فضفضه عن رياكت ونيكست وفيو ونوكست (بحكي تجربتي)

كنت دايما بشوف وبتواجهني مشاكل كتير مع 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 & ReactNuxt 4 & Vue 3
سهولة الكودمحتاج تركيز عالي (مانيوال)سلكان ورفاهية (أوتوماتيك)
إدارة الحالةHooks معقدة و useEffectref و reactive بسيطة جدا
تنظيم الملفاتزحمة وملفات كتير لكل صفحةمنظم جدا في فولدر app/
الأمانريسك في الـ Server Actionsصريح وآمن بـ Server APIs
السرعةممتازة بس محتاجة مجهود يدويطيارة بفضل الـ Vapor Mode و Nitro


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

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

10 ردود

  • و مفيش جدال ان في خواص في نيكست مش احسن حاجة، و ممكن تبدو انها زيادة عن اللزوم - overkill - زي مثلا الserver actions

    لكن بكل اختصار اللي خلاها تتشهر هي انها اول حل حقيقي، حول رياكت من كونها spa صفر seo

    لويب اب كامل بكل ميزات ال server rendering و اللي اهمها كان السيو في وقتها

    حاليا الموضوع مبقاش مبهر زي الاول، لظهور بدائل تانية زي اللي ذكرتها

    لكن فعلا القصة مش vercel بس

    عامة… nuxt فعلا بيتقال عنه كلام كويس… بس خد بالك من نقطة مهمة جدا:

    كل ما كان الفريمورك او المكتبة مشهورة، و ليها كومينيتي كبير، كل ما هيكون في حلول متوفر للمشاكل الشائعة اللي بتواجهك و هتواجهك

    طبعا ده ميمنعش انها هتكون عرضة لهجمات اكتر… بس مادام في كوميونتي كبير وراها، هيكون افضل كتير من انك تبدأ على حاجة اقل شهرة…. و تكتشف انك:

    1. بتحل مشاكل صعبة لوحدك

    2. لو حصل vulnerability.. هتلبس جامد، عشان مش هتلاقي حد نزل حل ليها بسرعة


    فالموضوع مش ابيض و اسود 

  • وجهة نظر تحترم جداً يا باشمهندس وأنا متفق معاك تماماً، مفيش حاجة في الدنيا (مش بس البرمجة) أبيض وإسود، وكل أداة ليها الـ trade-offs بتاعتها. نيكست فعلاً هي اللي فتحت الباب للـ SEO في عالم رياكت وكانت هي الـ Standard اللي الكل مشي وراه ودي نقطة تاريخية محدش يقدر ينكرها خالص

    بس من تجربتي البسيطة مع Nuxt

    • في حتة الكوميونتي والنمو فعلاً ريكت اكبر، بس كوميونتي نوكست حاليا كبر في تفاعله عن زمان (دا اللي كان خلاني ابدا في رياكت ونيكست زمان). أي مشكلة بتقابلني بلاقي لها حلول منظمة جدا  والـ Documentation بتاعهم يعتبر من أنظف الحاجات اللي شوفتها ودايما متحدث بتفاصيل كويسه جدا، وده بيقلل الـ "Hard problems" اللي ممكن الواحد يحلها لوحده.

    • وفي حتة الـ Security والاستمرارية برضو تركيزي على الـ DX مش معناه إهمال الأمان أو الاستمرارية. بالعكس، أنا بهتم دايمًا إن الفريمورك يقلل الـ footguns ويوضح الـ boundaries بين الـ client والـ server. في Nuxt فصل `/server` و Server APIs بيخلي تنفيذ الكود الحساس اوضح واامن، ومن غير ما تعتمد على conventions ممكن تخليني اغلط. كمان الـ Modules الجاهزة والمُهيأة صح بتقلل احتمالية misconfiguration اللي ممكن تعمل vulnerabilities من غير ما نحس ومن ناحية الاستمرارية، التحديثات التدريجية وومش disruptive بتخلي المشروع يعيش أطول، بالنسبالي الـ DX الكويس مش رفاهية، ده اللي بيخلي كتابة كود آمن وقابل للصيانة أسهل.

    • ومن ناحيه الاستقرار والتحديثات الجميل في نوكست إن تحديثاتها Soft Updates يعني مش كل نسخة جديدة تحس إنك بتهد المشروع وتبنيه من أول وجديد، وده مدي راحه وكمان مش كل شويه Major update.

    • من ناحية الايكوسيستم والادوات وجود Evan You صاحب Vite و Vitest ورا الـ Ecosystem ده بيدي ثقة كبيرة جداً. إحنا بنتكلم عن الشخص اللي غير شكل الـ Build Tools في الويب كله حاليا يعتبر ، فافكرة إن الـ Framework يموت بقت شبه مستحيلة.

    • ميزة برضو نسيت اقولها في تجربتي هي Nuxt modules دي فعلاً الميزة اللي ياريت نيكست تعمل زيها. فكرة إنك تحمل Module لـ Tailwind أو Prisma ويكون Pre-configured ومتوافق بنسبة 100% مع الـ Lifecycle بتاع الفريمورك، دي بتوفر كتير في حته الـ Boilerplate والـ Debugging.

    في الآخر، أنا مش منحاز لفريق ضد التاني، أنا بحب الجمال التقني وبحب الأداة اللي تخليني أطلع منتج شغال بسرعة وكفاءة. وزي ما اتعلمت منك القرار دايما بيرجع للـ Use Case بتاع البروجكت نفسه وان مفيش حاجه اسمها one tool fits all use cases.

    تسلم على النصيحة يا هندسة، وكلامك دايماً بيعدل حتة في تفكيرنا.❤️

  • ومالها sviltekit يا جماعه افجر meta framework  اتعمل شوف ال bundle عامل ازاي 

  •  AI tools بيكون شاطر دايما فى الحاجة Community بتاعها كبير حتى لو كانت اصعب 
    وبيكون مش شاطر فى الحاجة الى Community بتاعها صغير حتى ولو كانت اسهل
    لان AI بيتغذى على الداتا و nextjs+react لحم كتاف AI من خيرة 😊 
    فلو انت حابب تستخدم AI لازم تحط دة فى الاعتبار 

  • عابر الصحاري من ديسكورد يرحب بك