nextjs app router training

next.js應用程序路由器培訓

該站點為Next.js應用程序路由器引入了各種基本模式，以了解如何工作。

這個項目旨在

• 初學者的設計
• 訪問者可以看到代碼並了解其工作原理
• 盡可能多地消除不必要的代碼，以關注Next.js代碼
• 涵蓋應用程序路由器的許多模式

例子

例子	種類	地位
嵌套佈局	佈局	✅
模板	佈局	✅
覆蓋元數據	元數據	✅
生成opengraph映像	元數據	✅
服務器組件	渲染	✅
服務器和客戶端組成模式	渲染	✅
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應用程序路由器遊樂場