nextjs roadmap

Im Folgenden finden Sie eine umfassende Roadmap, die die Reise zu einem kompetenten Nächsten -Produktingenieur im Jahr 2023 zeigt. Ursprünglich für unsere Teammitglieder bei Blazity konzipiert. Wir sind begeistert, diese Roadmap mit der Community zu teilen, um aufstrebende und erfahrene Entwickler gleichermaßen zu helfen.

Bleib in der Schleife! Einen Stern geben und zuschauen? Das Github -Repo, um über frische Inhalte und Updates informiert zu werden.

Wenn Sie einen Next.js -Spezialisten einstellen möchten, geben Sie uns eine Nachricht unter [email protected] ein.

Was bedeutet Produktingenieur?

Produktingenieure betonen die gesamte Benutzererfahrung, das Mischen von Frontend, Backend und Design. Im Gegensatz zu "FullStack" -entwicklern haben sie ein breites, nicht tiefes Verständnis für Technologien und wenden sie auf annahmlose Produkte an. Sie priorisieren die schnelle Bereitstellung und das Benutzerfeedback. Im technischen Spektrum konzentrieren sie sich auf benutzerorientierte Funktionen. Die Branche wechselt vom Titel "FullStack Engineer" zum "Produktingenieur" und zeigt eine breitere Rolle als nur das Codieren.

Haftungsausschluss

Der Zweck dieser Roadmap ist es, Ihnen eine Vorstellung von der Landschaft zu geben. Die Roadmap wird Sie leiten, wenn Sie verwirrt sind, was Sie als nächstes lernen sollen, anstatt Sie zu ermutigen, das auszuwählen, was angesagt und trendy ist. Sie sollten ein gewisses Verständnis dafür anbauen, warum ein Tool für einige Fälle besser geeignet ist als das andere und sich an Hip und Trendy erinnern, was nicht immer für den Job am besten geeignet ist

Roadmap

Ressourcen

1. Grundlagen:

   1. Reagieren
   2. Typoskript
      1. TS -RESET - Ein CSS -Reset für Typscript, das Typen für gemeinsame JavaScript -APIs verbessert
   3. Next.js (ähnliche Rahmenbedingungen: Wasserstoff, Gatsby, Remix)

2. Rendering -Techniken:

   1. Streaming
   2. SSG (statische Site -Generierung)
   3. SP (serverlose Vorrenderung)
   4. ISR (inkrementelle statische Regeneration)
      1. Behoben
      2. Auf Anfrage
   5. CSR (Client-Seite-Rendering)
   6. SSR (serverseitiges Rendering)
   7. Vorschau -Modus

3. Styling & UI:

   1. Präprozessoren:
      1. Sass
      2. Postcss
      3. Weniger
   2. CSS in JS:
      1. Emotion
      2. Gestaltete Komponenten
      3. Gestyltes System
      4. Vanilleextrakt
      5. Linaria
      6. CSS -Module
      7. Rückenwindcss
   3. Komponentenbibliotheken:
      1. radix-ui
      2. Antd
      3. Nextui
      4. Ariakit
      5. React-Spektrum
      6. mui
      7. Daisyui
      8. Chakra
      9. fluentui
      10. Mantine
      11. Headlessui

4. Router:

   1. App Router
      1. Serverkomponenten
      2. Client -Komponenten
      3. Layouts
   2. Seiten Router

5. Leistung

   1. Flüssigkeitszufuhr
      1. Progressive Flüssigkeitszufuhr
      2. Selektive Hydratation
      3. Wiederauf geringer
   2. Weiter/Bild
   3. Weiter/Skript
   4. Weiter/Schrift
   5. Bundleanalyzer
   6. Partytown

6. Einsatz

   1. Hosting
      1. Vercel
      2. GCP
      3. AWS
      4. Netlify
      5. Azurblau
      6. Cloudflare
      7. Eisenbahn
      8. Machen
      9. Fly.io
      10. Digitaler Ozean
   2. CDN
      1. Cloudflare
      2. Cloudfront
      3. Keycdn
      4. Azurecdn
      5. CloudCDN
      6. Schnell
      7. Akamai
   3. Multizone
   4. IAC
      1. Sst.dev
      2. Pulumi
      3. Terraform

7. Staatsmanagement

   1. Zustand
   2. Kontext -API
   3. Jotai
   4. Redux -Toolkit
   5. Rückstoß
   6. Xstate
   7. Mobx

8. Bundler

   1. Webpack
   2. Turbopack

9. Testen

   1. E2E
      1. Dramatiker
      2. Zypresse
      3. Testcafe
   2. Einheit
      1. Scherz
      2. Vitest
   3. Integration
      1. Reagieren Sie die Testbibliothek
   4. Visuell
      1. Storybook
      2. Docz
      3. React StyleGuidist
      4. Reagieren Sie Kosmos

10. API -Kommunikation

    1. AUSRUHEN
       1. TanStack -Abfrage (funktioniert auch mit GraphQL)
       2. SWR (funktioniert auch mit GraphQL)
    2. Graphql
       1. Apollo
       2. Relais
       3. Urql
       4. GraphQL-Request
    3. Web -Sockeln
       1. Socket.io
       2. Schick
       3. Konvex
       4. Pusher
       5. Pubnub
       6. Firebase Echtzeitdatenbank
       7. Supabase
    4. API -Routen / Routenhandler
    5. GRPC
    6. TRPC

11. i18n

    1. Nächste Translate
    2. Lingui
    3. I18Next
    4. React-intl

12. Architektur

    1. Modular
    2. Feature-Trottel-Design
    3. Monorepo
       1. Turborepo
       2. NX
       3. Lerna
    4. Monolith

13. SEO

    1. Nächstes
    2. @Vercel/og

14. Auth

    1. NextAuth
    2. IronSession
    3. Reisepass

15. Beobachtbarkeit

    1. Opentelemetrie
    2. Datadog
    3. Neues Relikt
    4. Posten

? Einpacken

Haben Sie das Gefühl, in Abschnitten der Roadmap Raum für Verbesserungen zu verbessern? Bitte erwägen Sie, einen PR mit Ihren Vorschlägen zu öffnen oder Bedenken hinsichtlich von Themen zu markieren. Wir haben uns für eine kontinuierliche Verbesserung verpflichtet, daher möchten Sie dieses Repository möglicherweise für zukünftige Updates ansehen.

? Beitrag

Beiträge sind immer willkommen! Um einen Beitrag zu leisten, befolgen Sie bitte die folgenden Schritte:

1. Geben Sie das Repository auf.
2. Erstellen Sie einen neuen Zweig mit einem beschreibenden Namen.
3. Nehmen Sie Ihre Änderungen vor und verpflichten Sie sie.
4. Drücken Sie Ihre Änderungen in das Forked Repository.
5. Erstellen Sie eine Pull -Anfrage und wir werden Ihre Änderungen überprüfen.

? Gemeinschaft

Wenn Sie Hilfe suchen oder einfach Ihre Gedanken über das Projekt teilen möchten, empfehlen wir Ihnen, sich unserer Discord -Community anzuschließen. Hier ist der Link: https://blazity.com/discord. Es ist ein Raum, in dem wir Ideen austauschen und uns gegenseitig helfen. Jeder Input wird geschätzt und wir freuen uns darauf, Sie begrüßen zu dürfen.