nextjs-app-router-training
nextjs-app-router-training copied to clipboard
Published
20 hours ago •
hiroppy
hiroppy
Introducing various basic patterns of app router with simplified code.
Next.js App Router Training
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
Examples
| 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 | ✅ |
Adding a new sample
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
hiroppy