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 git@github.com: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