The Most Efficient Next.JS 14 Beginner Tutorial (TypeScript, App Router, React Server Components)

Note: This was originally a Next.js 13 tutorial. But since there are no API changes in Next.js 14, it’s still completely up-to-date.

Learn & understand all important features and caching strategies of the new Next.js app router as fast as possible.

You will learn:
-the difference between React server components and client components and when to use which
-how to fetch, cache, and revalidate data in the new Next.js 13 app router (static rendering, dynamic rendering, and incremental static regeneration)
-how to use the new routing system and special files (loading.tsx, error.tsx, not-found.tsx, layout.tsx, route.tsx, and page.tsx)
-how to set up API route handlers (GET, POST, etc.) and how to use NextRequest and NextResponse in your backend
-how to use useRouter, useSearchParams, and usePathname from next/navigation
-how the Next.js pages directory compares to the new app router
-the app router equivalents of getStaticProps, getServerSideProps, getStaticPaths, next/Head, and dynamic routes
-how to make component libraries like Bootstrap work with server components
-how to set up (dynamic) metadata like page titles, descriptions, opengraph images, favicons, and more
-how to deploy your project to Vercel

In this tutorial, you will build an image gallery app using the Unsplash API.

Get the starting code: https://github.com/codinginflow/nextjs-13.4-image-gallery/tree/0-Starting-Point

⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices
💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
💬 Join our developer community on Discord: https://codinginflow.com/discord

📣 Follow Coding in Flow on social media:
Twitter: https://twitter.com/codinginflow
Instagram: https://instagram.com/codinginflow
TikTok: https://tiktok.com/@codinginflow
Facebook: https://facebook.com/codinginflow

Timestamps:
0:00 – Intro & prerequisites
16:42 – Project setup & overview
22:13 – Next.js routing system, special files (page, layout, loading, error, not-found), metadata
42:52 – Making component libraries (like Bootstrap) work again
53:35 – Nav bar, next/Link, next/navigation (useRouter, usePathname, useSearchParams)
1:05:51 – Static rendering in server components
1:30:04 – Dynamic rendering in server components
1:38:14 – Incremental static regeneration in server components
1:41:34 – Dynamic route paths, generateStaticParams, dynamicParams
2:00:32 – generateMetadata, fetch deduplication, React cache, notFound
2:13:47 – Client-side fetching
2:44:46 – Deployment (Vercel) & social media preview (og:image, favicon)