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应用程序路由器游乐场