Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hiroppy/nextjs-app-router-training
Introducing various basic patterns of app router with simplified code.
https://github.com/hiroppy/nextjs-app-router-training
app-router nextjs nextjs-app-router nextjs-example server-components tailwindcss
Last synced: 3 days ago
JSON representation
Introducing various basic patterns of app router with simplified code.
- Host: GitHub
- URL: https://github.com/hiroppy/nextjs-app-router-training
- Owner: hiroppy
- License: mit
- Created: 2024-01-08T04:22:37.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-10-29T08:32:55.000Z (about 2 months ago)
- Last Synced: 2024-10-29T09:50:48.273Z (about 2 months ago)
- Topics: app-router, nextjs, nextjs-app-router, nextjs-example, server-components, tailwindcss
- Language: TypeScript
- Homepage: https://nextjs-app-router-training.vercel.app
- Size: 2.11 MB
- Stars: 403
- Watchers: 3
- Forks: 24
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js App Router Training
[This site](https://nextjs-app-router-training.vercel.app/) 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!
```sh
$ 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
```
## Thanks to
- [Next.js App Router Playground](https://vercel.com/templates/next.js/app-directory)