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)
On this page of the site you can watch the video online The Most Efficient Next.JS 14 Beginner Tutorial (TypeScript, App Router, React Server Components) with a duration of hours minute second in good quality, which was uploaded by the user Coding in Flow 28 May 2023, share the link with friends and acquaintances, this video has already been watched 72,239 times on youtube and it was liked by 2.1 thousand viewers. Enjoy your viewing!
