nextjs roadmap

ستجد أدناه خريطة طريق شاملة تعرض الرحلة لتصبح مهندس منتجات Next.js Proking في عام 2023. تم تصميمه مبدئيًا لأعضاء فريقنا في Blazity ، نحن سعداء بمشاركة خارطة الطريق هذه مع المجتمع لمساعدة المطورين الطموحين والمتمرسين على حد سواء.

ابق في الحلقة! امنح نجمًا ومشاهدة؟ ريبو Github للحصول على المحتوى الجديد والتحديثات.

إذا كنت تتطلع إلى توظيف أخصائي Next.js ، فقم بإسقاط رسالة على [email protected].

ماذا يعني مهندس المنتج؟

يؤكد مهندسو المنتجات على تجربة المستخدم بأكملها ، ومزج الواجهة الأمامية ، والخلفية ، والتصميم. على عكس مطوري "Fullstack" ، لديهم فهم واسع ، وليس عميقًا ، من التقنيات ، ويطبقونهم على صياغة منتجات سلسة. أنها تعطي الأولوية للنشر السريع وتعليقات المستخدم. في الطيف الهندسي ، يركزون على الميزات التي تركز على المستخدم. تنتقل الصناعة من عنوان "Fullstack Engineer" إلى "Engineer Product" ، مما يبرز دورًا أوسع من الترميز.

تنصل

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

خريطة الطريق

موارد

1. الأساسيات:

   1. رد فعل
   2. TypeScript
      1. TS -RESET - إعادة ضبط CSS لـ TypeScript ، وتحسين أنواع API JavaScript الشائعة
   3. next.js (أطراف مماثلة: الهيدروجين ، غاتسبي ، ريمكس)

2. التقنيات التقديم:

   1. جاري
   2. SSG (توليد الموقع الثابت)
   3. SPR (الإدانة قبل الخادم)
   4. ISR (تجديد ثابت ثابت)
      1. مُثَبَّت
      2. بناء على الطلب
   5. CSR (عرض من جانب العميل)
   6. SSR (عرض من جانب الخادم)
   7. وضع المعاينة

3. التصميم و UI:

   1. المعالجات المسبقة:
      1. ساس
      2. postcss
      3. أقل
   2. CSS في JS:
      1. العاطفة
      2. المكونات المصممة
      3. نظام على غرار
      4. مستخلص الفانيليا
      5. ليناريا
      6. وحدات CSS
      7. Tailwindcss
   3. مكتبات المكونات:
      1. radix-ui
      2. antd
      3. Nextui
      4. ariakit
      5. رد الفعل
      6. موي
      7. ديزيوي
      8. شقرا
      9. Fluentui
      10. مانتين
      11. headlessui

4. أجهزة التوجيه:

   1. جهاز توجيه التطبيق
      1. مكونات الخادم
      2. مكونات العميل
      3. تخطيطات
   2. توجيه الصفحات

5. أداء

   1. ترطيب
      1. الترطيب التدريجي
      2. ترطيب انتقائي
      3. استئناف
   2. التالي/الصورة
   3. التالي/السيناريو
   4. التالي/الخط
   5. bundleanalyzer
   6. Partytown

6. النشر

   1. الاستضافة
      1. Vercel
      2. GCP
      3. AWS
      4. NetLify
      5. أزور
      6. CloudFlare
      7. السكك الحديدية
      8. يجعل
      9. fly.io
      10. المحيط الرقمي
   2. CDN
      1. CloudFlare
      2. Cloudfront
      3. keycdn
      4. Azurecdn
      5. cloudcdn
      6. بسرعة
      7. أكاماي
   3. multizones
   4. IAC
      1. SST.Dev
      2. بولومي
      3. terraform

7. إدارة الدولة

   1. زوساند
   2. سياق API
   3. جوتاي
   4. Redux Toolkit
   5. نكص
   6. Xstate
   7. MOBX

8. حزم

   1. WebPack
   2. Turbopack

9. الاختبار

   1. e2e
      1. الكاتب المسرحي
      2. السرو
      3. Testcafe
   2. وحدة
      1. مزاح
      2. فيت
   3. اندماج
      1. رد فعل مكتبة اختبار
   4. مرئي
      1. قصص
      2. Docz
      3. رد فعل styleguidist
      4. رد فعل الكون

10. اتصالات API

    1. استراحة
       1. استعلام Tanstack (يعمل مع GraphQL أيضًا)
       2. SWR (يعمل مع GraphQL أيضا)
    2. GraphQl
       1. أبولو
       2. تتابع
       3. URQL
       4. graphql-request
    3. مآخذ الويب
       1. Socket.io
       2. ببراعة
       3. محدب
       4. انتهازي
       5. Pubnub
       6. قاعدة بيانات Firebase الحقيقية
       7. supabase
    4. مسارات API / معالجات الطريق
    5. GRPC
    6. TRPC

11. i18n

    1. ترانسليت التالي
    2. لغوي
    3. i18next
    4. رد فعل

12. بنيان

    1. وحدات
    2. تصميم الميزة المغطاة
    3. monorepo
       1. Turborepo
       2. NX
       3. ليرنا
    4. متراصة

13. كبار المسئولين الاقتصاديين

    1. التالي
    2. @vercel/og

14. مصادقة

    1. Nextauth
    2. الحديد
    3. جواز سفر

15. قابلية الملاحظة

    1. قياس الأوبنتيل
    2. datadog
    3. بقايا جديدة
    4. خفير

؟ اختتم

هل تشعر أن هناك مجالًا للتعزيز في أي أقسام من خريطة الطريق؟ يرجى النظر في فتح العلاقات العامة مع اقتراحاتك أو علامة أي مخاوف من خلال القضايا. نحن ملتزمون بالتحسين المستمر ، لذلك قد ترغب في مشاهدة/نجمة هذا المستودع للتحديثات المستقبلية.

؟ مساهمة

المساهمات دائما موضع ترحيب! للمساهمة ، يرجى اتباع هذه الخطوات:

1. شوكة المستودع.
2. إنشاء فرع جديد مع اسم وصفي.
3. قم بإجراء تغييراتك ، وارتكبها.
4. ادفع التغييرات الخاصة بك إلى مستودع متشعب.
5. قم بإنشاء طلب سحب ، وسنقوم بمراجعة التغييرات الخاصة بك.

؟ مجتمع

إذا كنت تبحث عن مساعدة أو تريد ببساطة مشاركة أفكارك حول المشروع ، فنحن نشجعك على الانضمام إلى مجتمع Discord. إليك الرابط: https://blazity.com/discord. إنها مساحة نتبادل فيها الأفكار ونساعد بعضنا البعض. يتم تقدير مدخلات الجميع ، ونتطلع إلى الترحيب بك.