Next.js recently released their new App Router, which introduces an entirely new paradigm for creating Next.js apps. As part of Virtual Coffee's Lunch & Learn series, I gave a two-part presentation where we dove in to how the App Router works.
In Part 1, we cover some JS history, and then dive in to the new App Router. We also spent some time on React Server Components.
In Part 2, we take a look at data fetching in the App Router, and ways Next.js can help optimize your app with little work on your end.
I created a companion GitHub repository that contains examples. The talk is broken up into sections - and each section has a corresponding Pull Request.
main branch has the full thing, each Pull Request is based off of the other, starting with the Base Install.
See the full running app here on Vercel
- Next.js Docs
- App Router Playground
- Next.js on React Server Components
- React Server Components on patterns.dev
- Hacker News thread by Dan Abramov
0: Base install
(branch only, no PR)
We start with the output of
npx create-next-app@latest, with a couple small adjustments
- Update design
- Add some basic routes
- Add a Root Layout
- Add some nested layouts
- Add some examples of Client Components