nextjs roadmap

Di bawah ini Anda akan menemukan peta jalan yang komprehensif yang menampilkan perjalanan untuk menjadi seorang insinyur produk berikutnya yang mahir pada tahun 2023. Awalnya dirancang untuk anggota tim kami di Blazity, kami senang berbagi peta jalan ini dengan masyarakat untuk membantu para pengembang yang bercita -cita tinggi dan berpengalaman.

Tetap di loop! Berikan bintang dan arloji? Repo GitHub untuk mendapat pemberitahuan tentang konten segar dan pembaruan.

Jika Anda ingin menyewa spesialis selanjutnya, kirimkan pesan di [email protected].

Apa arti insinyur produk?

Insinyur produk menekankan seluruh pengalaman pengguna, memadukan frontend, backend, dan desain. Tidak seperti pengembang "FullStack", mereka memiliki teknologi yang luas, tidak dalam, dan dalam menerapkannya untuk membuat produk yang mulus. Mereka memprioritaskan penyebaran cepat dan umpan balik pengguna. Dalam spektrum teknik, mereka fokus pada fitur yang berpusat pada pengguna. Industri ini beralih dari judul "Insinyur FullStack" ke "Insinyur Produk", menyoroti peran yang lebih luas dari sekadar pengkodean.

Penafian

Tujuan dari peta jalan ini adalah untuk memberi Anda gambaran tentang lanskap. Peta jalan akan memandu Anda jika Anda bingung tentang apa yang harus dipelajari selanjutnya, daripada mendorong Anda untuk memilih apa yang hip dan trendi. Anda harus menumbuhkan pemahaman tentang mengapa satu alat akan lebih cocok untuk beberapa kasus daripada yang lain dan mengingat pinggul dan trendi tidak selalu berarti paling cocok untuk pekerjaan itu

Peta jalan

Sumber daya

1. Fundamental:

   1. Bereaksi
   2. Naskah
      1. TS -Reset - Reset CSS untuk TypeScript, Meningkatkan Jenis untuk API JavaScript Umum
   3. Next.js (kerangka kerja serupa: Hydrogen, Gatsby, Remix)

2. Teknik Rendering:

   1. Mengalir
   2. SSG (pembuatan situs statis)
   3. SPR (pra-rendering tanpa server)
   4. ISR (regenerasi statis tambahan)
      1. Tetap
      2. On-Demand
   5. CSR (rendering sisi klien)
   6. SSR (rendering sisi server)
   7. Mode pratinjau

3. Styling & UI:

   1. Preprocessors:
      1. Kelancangan
      2. PostCSS
      3. Lebih sedikit
   2. CSS di JS:
      1. Emosi
      2. Komponen gaya
      3. Sistem gaya
      4. Ekstrak vanilla
      5. Linaria
      6. Modul CSS
      7. Tailwindcss
   3. Perpustakaan Komponen:
      1. Radix-UI
      2. Antd
      3. nextui
      4. Ariaktit
      5. react-spectrum
      6. Mui
      7. Daisyui
      8. Chakra
      9. FLUENTUI
      10. Mantine
      11. kepala tanpa kepala

4. Router:

   1. Router aplikasi
      1. Komponen server
      2. Komponen klien
      3. Tata letak
   2. Router halaman

5. Pertunjukan

   1. Hidrasi
      1. Hidrasi progresif
      2. Hidrasi selektif
      3. Resumability
   2. Berikutnya/Gambar
   3. Next/Script
   4. Berikutnya/Font
   5. BundleAnalyzer
   6. Partytown

6. Penyebaran

   1. Hosting
      1. Vercel
      2. GCP
      3. AWS
      4. Netlify
      5. Biru langit
      6. Cloudflare
      7. Kereta api
      8. Memberikan
      9. Fly.io
      10. Samudra Digital
   2. CDN
      1. Cloudflare
      2. Cloudfront
      3. Keycdn
      4. Azurecdn
      5. Cloudcdn
      6. Dengan cepat
      7. Akamai
   3. Multizon
   4. IAC
      1. Sst.dev
      2. Pulumi
      3. Terraform

7. Manajemen negara

   1. Zustand
   2. API Konteks
   3. Jotai
   4. Redux Toolkit
   5. Mundur
   6. Xstate
   7. Mobx

8. Bundler

   1. Webpack
   2. Turbopack

9. Pengujian

   1. E2e
      1. Dramawan
      2. Cypress
      3. Testcafe
   2. Satuan
      1. Bersenda gurau
      2. Vitest
   3. Integrasi
      1. Perpustakaan pengujian bereaksi
   4. Visual
      1. Buku cerita
      2. Docz
      3. Bereaksi StyleGuidist
      4. Bereaksi kosmos

10. Komunikasi API

    1. ISTIRAHAT
       1. Tanstack Query (juga berfungsi dengan graphql)
       2. SWR (Bekerja dengan GraphQL juga)
    2. Graphql
       1. Apollo
       2. Menyampaikan
       3. Urql
       4. GraphQL-Request
    3. Soket web
       1. Socket.io
       2. Dengan cakap
       3. Cembung
       4. Pusher
       5. Pubnub
       6. Database Realtime Firebase
       7. Supabase
    4. Rute API / Penangan Rute
    5. grpc
    6. trpc

11. i18n

    1. Translasi berikutnya
    2. lingui
    3. i18Next
    4. react-intl

12. Arsitektur

    1. Modular
    2. Desain yang diiris fitur
    3. Monorepo
       1. Turborepo
       2. Nx
       3. Lerna
    4. Monolit

13. Seo

    1. Next-seo
    2. @Vercel/OG

14. Auth

    1. NextAuth
    2. Ironesi
    3. Paspor

15. Kemampuan observasi

    1. OpenTelemetry
    2. Datadog
    3. Relik baru
    4. Penjaga

? Menyelesaikan

Merasa ada ruang untuk peningkatan di bagian mana pun dari peta jalan? Harap pertimbangkan untuk membuka PR dengan saran Anda atau menandai masalah apa pun melalui masalah. Kami berkomitmen untuk perbaikan berkelanjutan, jadi Anda mungkin ingin menonton/membintangi repositori ini untuk pembaruan di masa mendatang.

? Kontribusi

Kontribusi selalu diterima! Untuk berkontribusi, silakan ikuti langkah -langkah ini:

1. Garpu repositori.
2. Buat cabang baru dengan nama deskriptif.
3. Buat perubahan Anda, dan lakukan.
4. Dorong perubahan Anda ke repositori bercabang.
5. Buat permintaan tarik, dan kami akan meninjau perubahan Anda.

? Masyarakat

Jika Anda mencari bantuan atau hanya ingin berbagi pemikiran tentang proyek ini, kami mendorong Anda untuk bergabung dengan komunitas Discord kami. Inilah tautannya: https://blazity.com/discord. Ini adalah ruang di mana kami bertukar ide dan saling membantu. Masukan semua orang dihargai, dan kami berharap dapat menyambut Anda.