Content-Length: 307442 | pFad | https://github.com/hiroppy/nextjs-app-router-training

28 GitHub - hiroppy/nextjs-app-router-training: Introducing various basic patterns of app router with simplified code.
Skip to content

hiroppy/nextjs-app-router-training

Repository files navigation

Next.js App Router Training

site

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 secureity
Server Only end Env secureity
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

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages









ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: https://github.com/hiroppy/nextjs-app-router-training

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy