これを保存してください。React Server Components と Next.js をフィーチャーした 10 個のオープンソースプロジェクト。

Next.js バージョン 13 ではいくつかの新機能が導入されましたが、最も大きな変更点の 1 つは React Server Component (RSC) のサポートです。これは、Next.js App Router モードのデフォルトのコンポーネントタイプになりました。

RSCには、クライアントパッケージサイズの削減とプログラムパフォーマンスの向上、サーバーインフラストラクチャの活用、Node.jsランタイム環境内のRSCコンポーネントでNode.jsリソースを利用できるといった利点もあります。しかし、RSCはすべてをサポートしているわけではありません。UIインタラクションを必要とするシナリオでは、RSCだけでは不十分であり、クライアントコンポーネントとサーバーコンポーネントを組み合わせたハイブリッドレンダリングアプローチの開発が必要になります。

RSCはまだ比較的新しいため、学習リソースもあまり多くありません。現状では、使用するには特定のビルドツールやフレームワークが必要です。以下に、RSCとNext.js App Routerを組み合わせたオープンソースプロジェクトの例をいくつか示します。学習の参考になれば幸いです。

1. Netflixクローン

ソースコード: https://github.com/sadmann7/netflx-web
プレビュー: https://netflx-web.vercel.app/

2. 映画

ソースコード: https://github.com/transitive-bullshit/next-movie
プレビュー: https://next-movie.transitivebullsh.it

3. 商業

ソースコード: https://github.com/vercel/commerce
プレビュー: https://demo.vercel.store/search

4. ハッカーニュース

ソースコード: https://github.com/vercel/next-react-server-components
プレビュー: https://next-rsc-hn.vercel.app

5. Airbnbクローン

ソースコード: https://github.com/SashenJayathilaka/Airbnb-Build
プレビュー: https://abproject-sclone.vercel.app/

6.ドリフト

ソースコード: https://github.com/MaxLeiter/Drift
プレビュー: https://drift.lol/

7. 分類

ソースコード: https://github.com/shadcn/taxonomy
プレビュー: https://tx.shadcn.com/

8. ブログ

ソースコード: https://github.com/maxleiter/maxleiter.com
プレビュー: https://maxleiter.com/

9. ストリート写真

ソースコード: https://github.com/amannn/street-photography-viewer
プレビュー: https://street-photography-viewer.vercel.app/

10. 多段階フォーム

ソースコード: https://github.com/FesoQue/Advance-Multi-Step-Form
プレビュー: https://steppers-form.vercel.app/

DUICUO