nextjs roadmap

以下に、2023年に熟練したNext.JS製品エンジニアになるための旅を紹介する包括的なロードマップがあります。最初はBlazityのチームメンバー向けに設計されているので、このロードマップをコミュニティと共有して、意欲的でベテランのある開発者を支援することに興奮しています。

ループにとどまる！星を渡して見ますか？ githubリポジトリは、新鮮なコンテンツと更新について通知されます。

next.jsスペシャリストを雇うことを検討している場合は、[email protected]にメッセージをお送りください。

製品エンジニアとはどういう意味ですか？

製品エンジニアは、ユーザーエクスペリエンス全体を強調し、フロントエンド、バックエンド、デザインをブレンドします。 「フルスタック」開発者とは異なり、彼らは技術を深く、深く把握していない幅広いものを持っており、シームレスな製品をクラフトに適用しています。迅速な展開とユーザーフィードバックを優先します。エンジニアリングスペクトルでは、ユーザー中心の機能に焦点を当てています。業界は、タイトル「フルスタックエンジニア」から「製品エンジニア」に移行しており、単なるコーディングよりも広い役割を強調しています。

免責事項

このロードマップの目的は、風景についてのアイデアを提供することです。ロードマップは、ヒップでトレンディなものを選ぶように奨励するのではなく、次に何を学ぶべきかについて混乱している場合に導きます。 1つのツールが他のツールよりもいくつかのケースに適している理由をある程度理解する必要があります。

ロードマップ

リソース

1. 基礎：

   1. 反応します
   2. タイプスクリプト
      1. TS -RESET -TypeScriptのCSSリセット、一般的なJavaScriptAPIのタイプの改善
   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. JSのCSS：
      1. 感情
      2. スタイルのコンポーネント
      3. スタイルのシステム
      4. バニラエキス
      5. リナリア
      6. CSSモジュール
      7. Tailwindcss
   3. コンポーネントライブラリ：
      1. RADIX-UI
      2. antd
      3. NextUi
      4. アリアキット
      5. Reactspectrum
      6. ムイ
      7. daisyui
      8. チャクラ
      9. Fluentui
      10. マンティン
      11. ヘッドレッシュイ

4. ルーター：

   1. アプリルーター
      1. サーバーコンポーネント
      2. クライアントコンポーネント
      3. レイアウト
   2. ページルーター

5. パフォーマンス

   1. 水分補給
      1. 進行性の水分補給
      2. 選択的な水分補給
      3. 再開性
   2. 次/画像
   3. 次の/スクリプト
   4. 次の/フォント
   5. Bundleanalyzer
   6. パーティータウン

6. 展開

   1. ホスティング
      1. ヴェルセル
      2. GCP
      3. aws
      4. netlify
      5. azure
      6. CloudFlare
      7. 鉄道
      8. 与える
      9. fly.io
      10. デジタルオーシャン
   2. CDN
      1. CloudFlare
      2. クラウドフロント
      3. keycdn
      4. azurecdn
      5. cloudcdn
      6. 早く
      7. アカマイ
   3. マルチゾーン
   4. IAC
      1. sst.dev
      2. プルミ
      3. テラフォーム

7. 国家管理

   1. Zustand
   2. コンテキストAPI
   3. ジョタイ
   4. Redux Toolkit
   5. 反動
   6. XSTATE
   7. mobx

8. バンドラー

   1. webpack
   2. ターボパック

9. テスト

   1. E2E
      1. 劇作家
      2. サイプレス
      3. testcafe
   2. ユニット
      1. 冗談
      2. vitest
   3. 統合
      1. 反応テストライブラリ
   4. ビジュアル
      1. ストーリーブック
      2. docz
      3. React 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. サパバーズ
    4. APIルート /ルートハンドラー
    5. GRPC
    6. TRPC

11. i18n

    1. 次の翻訳
    2. Lingui
    3. i18next
    4. React-intl

12. 建築

    1. モジュラー
    2. 機能スライスデザイン
    3. モノレポ
       1. Turborepo
       2. nx
       3. レルナ
    4. モノリス

13. SEO

    1. 次のセオ
    2. @vercel/og

14. 認証

    1. nextauth
    2. アイアンセッション
    3. パスポート

15. 観察可能性

    1. Opentelemetry
    2. datadog
    3. 新しい遺物
    4. セントリー

？まとめ

ロードマップのどのセクションにも強化する余地があると感じますか？提案でPRを開くか、問題を介して懸念にフラグを立てることを検討してください。私たちは継続的な改善に取り組んでいるので、将来の更新のためにこのリポジトリを視聴/主演することをお勧めします。

？貢献

貢献はいつでも大歓迎です！貢献するには、次の手順に従ってください。

1. リポジトリをフォークします。
2. 説明的な名前の新しいブランチを作成します。
3. あなたの変更を加えて、それらをコミットします。
4. 変更をフォークリポジトリに押し込みます。
5. プルリクエストを作成すると、変更を確認します。

？コミュニティ

あなたが助けを探しているか、単にプロジェクトについてあなたの考えを共有したいなら、私たちはあなたが私たちのDiscordコミュニティに参加することをお勧めします。これがリンクです：https：//blazity.com/discord。それは私たちがアイデアを交換し、お互いを助ける空間です。みんなの入力が高く評価されています。私たちはあなたを歓迎することを楽しみにしています。