From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

How to use children and props in React and Next.js

How to use children and props in React and Next.js

From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

Start my 1-month free trial Buy for my team

How to use children and props in React and Next.js

“

So we've modified our layout now to be dynamically rendering on conditions whether or not we're in the home page and we're still passing in children or we're further destructured our props in order to do that we pass in metadata as well using the head tag, we've used the link tag as well for our in order to render and remember render with pre fetching and code splitting which is fantastic and we're leveraging image so this is really the right way to be using next. And we've got image here for priority loading. It's gonna then also load lazy load properly with our images. We're customizing some dimensions, adding some utility styling for our heading information, and then we're conditionally rendering our children when we're not in the home page. So when we are in the home page, we just want the image, and And when we're in the blog page, we're going to get everything. All right, so let's go over to our index page and get this working. So, as we said, children, we want to wrap…

Contents