Next.js 13 版本中引入了一些新功能，變化比較大的一個點是 React Server Component（簡稱 RSC）的支持，并且在 Next.js App Router 模式下做為一種默認的組件類型。

RSC 也給我們帶來了一些好處，例如，減少了客戶端的包大小提高能程序的性能、可以利用服務器的一些基礎設施，當在 Node.js 運行時環(huán)境下，Node.js 可以用的資源在 RSC 組件中也都可以使用。當然，也不是什么都支持的，當需要 UI 交互的場景，RSC 就不行了，此時需要編寫 Client Component 與 Server Component 做混合渲染。

RSC 還是比較新的一個東西，學習資料也不是很多，并且當前階段必須在一些構建工具或框架中才可以使用。以下推薦一些 RSC + Next.js App Router 相結合的開源項目示例，希望能為您的學習帶來一些幫助。

1. Netflix Clone

• 源碼：https://github.com/sadmann7/netflx-web
• 預覽：https://netflx-web.vercel.app/

2. Movies

• 源碼：https://github.com/transitive-bullshit/next-movie
• 預覽：https://next-movie.transitivebullsh.it

3. Commerce

• 源碼：https://github.com/vercel/commerce
• 預覽：https://demo.vercel.store/search

4. Hacker News

• 源碼：https://github.com/vercel/next-react-server-components
• 預覽：https://next-rsc-hn.vercel.app

5. AirBnB Clone

• 源碼：https://github.com/SashenJayathilaka/Airbnb-Build
• 預覽：https://abproject-sclone.vercel.app/

6. Drift

• 源碼：https://github.com/MaxLeiter/Drift
• 預覽：https://drift.lol/

7. Taxonomy

• 源碼：https://github.com/shadcn/taxonomy
• 預覽：https://tx.shadcn.com/

8. Blog

• 源碼：https://github.com/maxleiter/maxleiter.com
• 預覽：https://maxleiter.com/

9. Street photography

• 源碼：https://github.com/amannn/street-photography-viewer
• 預覽：https://street-photography-viewer.vercel.app/

10. A multi-step form

• 源碼：https://github.com/FesoQue/Advance-Multi-Step-Form
• 預覽：https://steppers-form.vercel.app/