CODEWITHSUNDEEP
next.js
MERN Stack Developer
MERN Stack Developer

Reputation: 33

In Next JS app unable to set the link title with dynamic routes

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

Upvotes: 0

Views: 65

Answers (1)

Qian_Yu
Qian_Yu

Reputation: 166

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:

// app\directors\[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 />
}


// app\directors\[id]\DirectorsClient.tsx

"use client"

export default function DirectorsClient() {
  return (
    <div>Directors Client Page</div>
  )
}

Upvotes: 1

Related Questions