Перейти к содержимому

Next.js Client Components | Build a Small Project with Nextjs 13

Dave Gray

0:00 / 0:00

Next.js Client Components | Build a Small Project with Nextjs 13

35 691 просмотр · 3 года назад
Dave Gray
445 тыс. подписчиков
35 691 просмотр · 3 года назад
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap Learn when to use Next.js client components and build a small project with Nextjs 13. In this Next.js tutorial, we will apply what we have learned about server components and learn when to use client components in our Next.js projects. 💖 Support me on Patreon ➜   / davegray   ⭐ Become a full-stack web dev with Zero To Mastery Courses: Complete Next.js Developer: https://bit.ly/CompNextJSDev Advanced React: https://bit.ly/AdvReactDev Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr 🚩 Subscribe ➜ https://bit.ly/3nGHmNn 📬 Course Updates ➜ https://courses.davegray.codes/ ❓ Questions - Please post them to my Discord ➜   / discord   ☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray 👇 Follow Me On Social Media: Github: https://github.com/gitdagray Twitter:   / yesdavidgray   LinkedIn:   / davidagray   🔗 Source Code: https://github.com/gitdagray/next-js-... 🔗 Playlist for this Next.js Course: https://bit.ly/dg-nextjs Next.js Client Components | Build a Small Project (00:00) Intro (00:05) Welcome (00:27) When to use client components (00:59) Create a new Next.js project (02:10) Add Tailwind CSS to the project (05:34) Parent page clean up (06:35) Navbar and layout (10:30) Client Component (19:23) Add a Dynamic Route (20:57) getWikiResults function (23:35) Defining types (25:14) Displaying the results (31:13) Generating Metadata (34:06) Item component (37:33) Results with the Item component (39:15) Adding error and loading pages (41:18) Identifying component types 📚 Tutorial References: 🔗 Next.js Official Site: https://nextjs.org/ 🔗 Next.js 13 Beta Docs: https://beta.nextjs.org/docs Was this Next.js tutorial about Client Components and building a small project helpful? If so, please share. Let me know your thoughts in the comments. #nextjs #small #project