Next.js 13 App Directory Tutorial

Next.js 13 shipped a new App Router built on top of React Server Components. The app directory supports layouts, nested routing, loading states, error handling, api endpoints and more. This tutorial covers the basics in mentioned topics.

The code: https://github.com/danba340/nextjs-app-directory-tutorial

Twitter: https://twitter.com/BarelyDaniel Github: https://github.com/danba340 Instagram: https://www.instagram.com/barelycoding TikTok: https://www.tiktok.com/@barelycoding LinkedIn: https://www.linkedin.com/in/daniel-bark

0:00 Intro 0:50 create-next-app 1:10 page.tsx 1:45 root layout 2:10 route.ts for api routes 3:45 nested route with id param 4:54 mocked data route 5:26 async data fetching 6:21 nested layouts 7:02 loading.tsx 7:48 not-found.tsx 8:48 error.tsx 10:12 edge runtime 10:28 prerendering pages 11:06 co locating components and css modules ... https://www.youtube.com/watch?v=WVYNNX28nDw