Metadata in Your Next.js Client Components
USE CASE: If I can only use the Next.js 15 metadata object in server components, how do I handle SEO for my client component pages?
Proper Answer: You're supposed to refactor your client functionality into their own logical client components, then import them into your primary page component (that will of course, be a server component), which will naturally contain all of your page's metadata object stuff.
Lazy Developer's Answer: Create a server side component containing only your metadata-object-stuff and import your client component. Then, go to lunch.
1//PAGE.TSX
2// /homers-guide-to-donuts/page.tsx
3//My newly created "shell" file. This is the server side component in my directory to be served.
4
5import type {Metadata} from "next";
6import ClientSidePage from './clientSidePage'
7
8export const metadata: Metadata = {
9 title: 'Homers Guide to Donuts',
10 description: 'I never met a donut I did not like. - Homer Simpson ',
11 keywords: ['Glazed donuts', 'Jelly donuts','Powdered donuts']
12}
13
14export default function HomersGuideToDonuts() {
15 return (
16 <ClientSidePage />
17 )
18}1//CLIENTSIDEPAGE.TSX
2// this WAS named "page.tsx" before I realized I forgot to add metadata stuff and needed a server component - doh!
3
4'use client'
5
6import {useState} from 'react'
7
8// API calls to donut databases, a lot of donut logic, chomp - chomp - burp....
9const hmmmDonut = 'Glazed donut.'
10
11export default function ClientSidePage() {
12
13 //Set state stuff... only client components can use useState()
14 const [donutOfTheDay, setDonutOfTheDay] = useState<string>(hmmmDonut);
15
16 return (
17 <div>
18 Today my favorite donut is {donutOfTheDay}
19 </div>
20 );
21} Summary: There are actually a number of different strategies on how to handle SEO in Next.js 15 but this will get you past the predicament of when you need to add metadata to your client component. RTFM!