This site introduces various basic patterns for Next.js app router to understand how to work it.
This project aims to
- design for beginners to understand
- visitors can see the code and understand how it works
- eliminating unnecessary code as much as possible to focus on Next.js code
- covering many patterns for app router
| Example | Kind | Status |
|---|---|---|
| Nesting Layouts | layout | ✅ |
| Template | layout | ✅ |
| Overwriting Metadata | metadata | ✅ |
| Generating OpenGraph Image | metadata | ✅ |
| Server Components | rendering | ✅ |
| Server and Client Composition Patterns | rendering | ✅ |
| RSC Payload | rendering | ✅ |
| Client and Server Components | basic | ✅ |
| Grouping | route groups | ✅ |
| Loading Immediately | loading | ✅ |
| Loading with Streaming | loading | ✅ |
| Loading with Preloading Data | loading | ✅ |
| Error Immediately | error | ✅ |
| Not Found | error | ✅ |
| A Single Segment | dynamic routes | ✅ |
| Catch-all Segments | dynamic routes | ✅ |
| Optional Catch-all Segments | dynamic routes | ✅ |
| Parallel Routes | parallel routes | ✅ |
| Conditional Routes | parallel routes | ✅ |
| Intercepting Routes | intercepting routes | ✅ |
| Modal with Parallel Routes | intercepting routes | ✅ |
| Caching Data | fetching | ✅ |
| Request Memoization (@server) | caching | ✅ |
| Data Cache (@server) | caching | ✅ |
| Full Route Cache (@server) | caching | ✅ |
| Router Cache (@client) | caching | ✅ |
| Route Handlers | route handlers | ✅ |
| Dynamic Route Segments | route handlers | ✅ |
| Server Actions | server actions | ✅ |
| Non-form Elements | server actions | ✅ |
| Optimistic Updates | server actions | ✅ |
| Taint | security | ✅ |
| Server Only end Env | security | ✅ |
| Shopping | showcases | ✅ |
Welcome to submitting a new example but please write simplified code as much as possible to understand beginners!
$ 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