nextjs app router training

next.jsアプリルータートレーニング

このサイトでは、next.jsアプリルーターのさまざまな基本パターンを紹介して、その仕組みを理解します。

このプロジェクトの目的

• 初心者が理解するためのデザイン
• 訪問者はコードを見て、それがどのように機能するかを理解することができます
• next.jsコードに焦点を合わせるために、不要なコードを可能な限り削除する
• アプリルーターの多くのパターンをカバーします

例

例	親切	状態
ネストレイアウト	レイアウト	✅
テンプレート	レイアウト	✅
上書きメタデータ	メタデータ	✅
オープングラフ画像の生成	メタデータ	✅
サーバーコンポーネント	レンダリング	✅
サーバーとクライアントの構成パターン	レンダリング	✅
RSCペイロード	レンダリング	✅
クライアントおよびサーバーコンポーネント	基本	✅
グループ化	ルートグループ	✅
すぐに読み込みます	読み込み	✅
ストリーミングでロード	読み込み	✅
プリロードデータのロード	読み込み	✅
すぐにエラー	エラー	✅
見つかりません	エラー	✅
単一のセグメント	動的ルート	✅
すべてのセグメント	動的ルート	✅
オプションのキャッチオールセグメント	動的ルート	✅
平行ルート	平行ルート	✅
条件付きルート	平行ルート	✅
インターセプトルート	インターセプトルート	✅
平行ルートを備えたモーダル	インターセプトルート	✅
キャッシュデータ	フェッチ	✅
メモをリクエストする（@server）	キャッシング	✅
データキャッシュ（@server）	キャッシング	✅
フルルートキャッシュ（@server）	キャッシング	✅
ルーターキャッシュ（@client）	キャッシング	✅
ルートハンドラー	ルートハンドラー	✅
動的ルートセグメント	ルートハンドラー	✅
サーバーアクション	サーバーアクション	✅
非型の要素	サーバーアクション	✅
楽観的な更新	サーバーアクション	✅
汚染	安全	✅
サーバーのみがenv	安全	✅
買い物	ショーケース	✅

新しいサンプルを追加します

新しい例を送信することを歓迎しますが、初心者を理解するために可能な限り簡素化されたコードを書いてください！

$ git clone [email protected]:hiroppy/nextjs-app-router-training.git
$ cd nextjs-app-router-training
$ npm i
$ mkdir src/app/examples/new-example
# adding code to src/app/examples/new-example
$ # editing src/app/examples/data.ts to add meta data, please refer type definitions
$ npm run generate
$ # editing a table in README.md 

に感謝します

• next.jsアプリルーターの遊び場