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/nextj...
⭐ 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/reactbes...
💌 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: / codinginflow
Instagram: / codinginflow
TikTok: / codinginflow
Facebook: / 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)
Watch video The Most Efficient Next.JS 14 Beginner Tutorial (TypeScript, App Router, React Server Components) online without registration, duration hours minute second in high quality. This video was added by user Coding in Flow 28 May 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 68,557 once and liked it 2 thousand people.