In my next js app, my structure is as follow:
src
app
layout.tsx
directors
page.tsx <-- having use client property
layout.tsx
export const metadata: Metadata = {
title: "Example app",
description: "Generated by create next app",
};
directors/page.tsx
“use client”
return (
<>
<NextSeo
title="About Us, or just any title that you wish"
description="Then with a short description here."
/>
</>
)
I have an issue that I am only able to set the link title in the layout and it used the same title for each dynamic route pages. Since I have the use client property for dynamic route pages, may I ask any ways to set different link titles for each dynamic route ? I tried to use NextSeo to set title but it could not work
2
Since NextSeo is designed to work with the Pages Router and server-side rendering. You can use Metadata API for version 13+.
With the usage of use clinet, you can use Hybrid Approach to set the dynamic route link title. For example:
// appdirectors[id]page.tsx
import { Metadata } from 'next'
import DirectorsClient from './DirectorsClient'
export async function generateMetadata({ params }: {params: {id: string}}): Promise<Metadata> {
return {
title: `Director ${params.id}`,
description: `Information about director ${params.id}`
}
}
export default function DirectorsPage() {
return <DirectorsClient />
}
// appdirectors[id]DirectorsClient.tsx
"use client"
export default function DirectorsClient() {
return (
<div>Directors Client Page</div>
)
}