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)
Auf dieser Seite können Sie das Online-Video The Most Efficient Next.JS 14 Beginner Tutorial (TypeScript, App Router, React Server Components) mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Coding in Flow 28 Mai 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 72,239 Mal angesehen und es wurde von 2.1 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
