From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

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

Add metadata to client and server components

Add metadata to client and server components

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Add metadata to client and server components

“

Hello, and welcome! In this session, you'll learn a crucial skill for any modern web application – adding metadata. We'll explore how Next.js makes it easy to manage metadata for both server and client components. This is essential for improving your site's Search Engine Optimization, SEO, and ensuring your links look great when shared on social media. We'll with basic titles and descriptions, and then move on to more advanced concepts like OpenGraph and Twitter cards. Let's start by looking at our Contact page. You can see at the top I've used the Use Client directive. This marks the component as a client component, which is necessary because it uses hooks like Use Form for interactive form handling. The key thing to note here is that But because this is a client component, we cannot directly export a metadata object from this file. We'll need a different strategy, which I'll show you shortly. Okay, so to handle metadata in our client component, we're going to make a small adjustment…

Contents