nextjs roadmap

ด้านล่างคุณจะพบแผนงานที่ครอบคลุมซึ่งจัดแสดงการเดินทางสู่การเป็นวิศวกรผลิตภัณฑ์ต่อไปที่มีความเชี่ยวชาญในปี 2566 ได้รับการออกแบบมาสำหรับสมาชิกในทีมของเราที่ Blazity เราตื่นเต้นที่จะแบ่งปันแผนงานนี้กับชุมชนเพื่อช่วยเหลือนักพัฒนาที่ต้องการและมีประสบการณ์

อยู่ในวง! ให้ดาราและดู? GitHub repo เพื่อรับการแจ้งเตือนเกี่ยวกับเนื้อหาและการอัปเดตใหม่

หากคุณต้องการจ้างผู้เชี่ยวชาญต่อไป JS ให้ส่งข้อความถึงเราที่ [email protected]

วิศวกรผลิตภัณฑ์หมายถึงอะไร?

วิศวกรผลิตภัณฑ์เน้นประสบการณ์การใช้งานทั้งหมดการผสมผสานส่วนหน้าแบ็คเอนด์และการออกแบบ ซึ่งแตกต่างจากนักพัฒนา "FullStack" พวกเขามีความเข้าใจเทคโนโลยีที่กว้างไม่ลึกและใช้เทคโนโลยีที่ใช้งานได้อย่างไร้รอยต่อ พวกเขาจัดลำดับความสำคัญการปรับใช้อย่างรวดเร็วและความคิดเห็นของผู้ใช้ ในสเปกตรัมวิศวกรรมพวกเขามุ่งเน้นไปที่คุณสมบัติผู้ใช้เป็นศูนย์กลาง อุตสาหกรรมกำลังเปลี่ยนจากชื่อ "Fullstack Engineer" เป็น "Product Engineer" โดยเน้นบทบาทที่กว้างกว่าการเข้ารหัส

คำเตือน

จุดประสงค์ของแผนงานนี้คือเพื่อให้คุณมีความคิดเกี่ยวกับภูมิทัศน์ แผนที่ถนนจะแนะนำคุณหากคุณสับสนเกี่ยวกับสิ่งที่จะเรียนรู้ต่อไปแทนที่จะสนับสนุนให้คุณเลือกสิ่งที่ทันสมัยและทันสมัย คุณควรเพิ่มความเข้าใจว่าทำไมเครื่องมือหนึ่งจึงเหมาะสมกว่าสำหรับบางกรณีมากกว่าที่อื่น ๆ และจำไว้

แผนงาน

ทรัพยากร

1. พื้นฐาน:

   1. ตอบโต้
   2. ตัวพิมพ์ใหญ่
      1. TS -Reset - A CSS รีเซ็ตสำหรับ typeScript, การปรับปรุงประเภทสำหรับ JavaScript API ทั่วไป
   3. Next.js (กรอบงานที่คล้ายกัน: ไฮโดรเจน, Gatsby, Remix)

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. daisyui
      8. จักระ
      9. คล่องแคล่ว
      10. เมนไทน์
      11. headlessui

4. เราเตอร์:

   1. เราเตอร์แอป
      1. ส่วนประกอบเซิร์ฟเวอร์
      2. ส่วนประกอบลูกค้า
      3. เค้าโครง
   2. หน้าเราเตอร์

5. ผลงาน

   1. ความชุ่มชื้น
      1. ความชุ่มชื้นแบบก้าวหน้า
      2. ความชุ่มชื้นแบบเลือก
      3. ความสามารถในการกลับมาทำงานได้
   2. ถัดไป/รูปภาพ
   3. ถัดไป/สคริปต์
   4. ถัดไป/ตัวอักษร
   5. Bundleanalyzer
   6. ปาร์ตี้ทาวน์

6. การปรับใช้

   1. การโฮสติ้ง
      1. vercel
      2. GCP
      3. aws
      4. ทำให้เป็นตะลึง
      5. สีฟ้า
      6. เมฆ
      7. ทางรถไฟ
      8. ทำให้
      9. fly.io
      10. มหาสมุทรดิจิตอล
   2. CDN
      1. เมฆ
      2. เมฆ
      3. ปุ่มกด
      4. azurecdn
      5. เมฆ
      6. อย่างเกียจคร้าน
      7. อาคาเมะ
   3. มัลติโซน
   4. IAC
      1. sst.dev
      2. pulumi
      3. รูปปั้น

7. การจัดการรัฐ

   1. ซุสและ
   2. บริบท API
   3. โจติ
   4. Redux Toolkit
   5. การหดตัว
   6. เอสเตท
   7. mobx

8. ผู้ประกอบการ

   1. เว็บแพ็ค
   2. แทงแท่ง

9. การทดสอบ

   1. E2E
      1. นักเขียนบทละคร
      2. ไซเปรส
      3. TestCafe
   2. หน่วย
      1. ล้อเล่น
      2. การพูดด้วยน้ำ
   3. การรวมเข้าด้วยกัน
      1. react testing library
   4. ภาพ
      1. หนังสือนิทาน
      2. docz
      3. React Styleguidist
      4. ตอบโต้ Cosmos

10. การสื่อสาร API

    1. พักผ่อน
       1. Tanstack Query (ทำงานกับ GraphQl ด้วย)
       2. SWR (ทำงานกับ GraphQl ด้วย)
    2. graphql
       1. อพอลโล
       2. ถ่ายทอด
       3. urql
       4. GraphQl-Request
    3. ซ็อกเก็ตเว็บ
       1. ซ็อกเก็ต
       2. ด้วยความสามารถ
       3. นูน
       4. ผู้ผลักดัน
       5. pubnub
       6. ฐานข้อมูล RealTime Firebase
       7. supabase
    4. เส้นทาง API / ตัวจัดการเส้นทาง
    5. GRPC
    6. TRPC

11. i18n

    1. การแปลครั้งต่อไป
    2. Lingui
    3. i18next
    4. react-intl

12. สถาปัตยกรรม

    1. เป็นแบบแยกส่วน
    2. การออกแบบที่มีกลิ่นหอม
    3. โมโนโพร
       1. เครื่องขุ่น
       2. NX
       3. เลิร์นนา
    4. หินก้อนใหญ่

13. SEO

    1. ถัดไป
    2. @vercel/og

14. รับรองความถูกต้อง

    1. Nextauth
    2. เกี่ยวกับการมีไอโรนส์
    3. หนังสือเดินทาง

15. ความสังเกตได้

    1. opentelemetry
    2. ดาต้าด็อก
    3. ใหม่ของที่ระลึก
    4. ทหารยาม

- ห่อหุ้ม

รู้สึกว่ามีที่ว่างสำหรับการปรับปรุงในส่วนใด ๆ ของแผนงาน? โปรดพิจารณาเปิดการประชาสัมพันธ์พร้อมคำแนะนำของคุณหรือตั้งค่าสถานะข้อกังวลใด ๆ ผ่านปัญหา เรามุ่งมั่นที่จะปรับปรุงอย่างต่อเนื่องดังนั้นคุณอาจต้องการดู/ดาวที่เก็บนี้สำหรับการอัปเดตในอนาคต

- ผลงาน

ยินดีต้อนรับการมีส่วนร่วมเสมอ! เพื่อมีส่วนร่วมโปรดทำตามขั้นตอนเหล่านี้:

1. แยกที่เก็บ
2. สร้างสาขาใหม่ด้วยชื่อเชิงพรรณนา
3. ทำการเปลี่ยนแปลงของคุณและกระทำพวกเขา
4. ผลักดันการเปลี่ยนแปลงของคุณไปยังที่เก็บข้อมูล
5. สร้างคำขอดึงและเราจะตรวจสอบการเปลี่ยนแปลงของคุณ

- ชุมชน

หากคุณกำลังมองหาความช่วยเหลือหรือเพียงแค่ต้องการแบ่งปันความคิดของคุณเกี่ยวกับโครงการเราขอแนะนำให้คุณเข้าร่วมชุมชน Discord ของเรา นี่คือลิงค์: https://blazity.com/discord เป็นพื้นที่ที่เราแลกเปลี่ยนความคิดเห็นและช่วยเหลือซึ่งกันและกัน การป้อนข้อมูลของทุกคนได้รับการชื่นชมและเราหวังว่าจะได้ต้อนรับคุณ