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.

⭐ 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 https://discord.gg/neKghyefqh

Buy Me A Coffee https://www.buymeacoffee.com/davegray

Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

Source Code: https://github.com/gitdagray/next-js-course

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