How to set title metadata to functiomn params
Answered
Yellowstripe scad posted this in #help-forum
Yellowstripe scadOP
I'd like to set the title to params.id, don't know how.
export const metadata: Metadata = {
title: ""
}
export default function Switch({ params }: { params: { id: string } }) {
const switchItem = switchesData.find((item) => item.id === params.id);
if (!switchItem) {
return <Custom404 />;
}
...Answered by Ray
hi, you can use
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
generateMetadata function for thatimport { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
const switchItem = switchesData.find((item) => item.id === params.id);
return {
title: switchItem.title
}
}
export default function Page({ params, searchParams }: Props) {}https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
120 Replies
@Yellowstripe scad I'd like to set the title to params.id, don't know how.
js
export const metadata: Metadata = {
title: ""
}
export default function Switch({ params }: { params: { id: string } }) {
const switchItem = switchesData.find((item) => item.id === params.id);
if (!switchItem) {
return <Custom404 />;
}
...
hi, you can use
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
generateMetadata function for thatimport { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
const switchItem = switchesData.find((item) => item.id === params.id);
return {
title: switchItem.title
}
}
export default function Page({ params, searchParams }: Props) {}https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
Answer
@Ray hi, you can use `generateMetadata` function for that
ts
import { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
const switchItem = switchesData.find((item) => item.id === params.id);
return {
title: switchItem.title
}
}
export default function Page({ params, searchParams }: Props) {}
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
Yellowstripe scadOP
thank you so much, ill mark as solution if it works!
@Ray hi, you can use `generateMetadata` function for that
ts
import { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
const switchItem = switchesData.find((item) => item.id === params.id);
return {
title: switchItem.title
}
}
export default function Page({ params, searchParams }: Props) {}
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
Yellowstripe scadOP
Im quite new to nextjs and typescript, what does this mean, when I hover over switchItem.title?
does this just mean that
Property 'title' does not exist on type '{ id: string; switch: string; manufacturer: string; brand: string; switch_type: string; description: string; pins: number; specs: { actuation: string; bottom_out: string; pre_travel: string; total_travel: string; ... 7 more ...; housing_bottom_material: string; }[]; media: { ...; }[]; prices: { ...; }[]; } | { ...; }'.does this just mean that
oh
oops
change the title to whatever you want to display
i just use it as an example
Yellowstripe scadOP
got it, how would I set the metadata to that
like would the code you showed work?
yes
Yellowstripe scadOP
or would I need to plugin generateMetadata
you can either use
generateMetadata or export a metadata object to set it@Ray you can either use `generateMetadata` or export a `metadata` object to set it
Yellowstripe scadOP
I have it like this now, what am I doing wrong? it doesn't work
is this a page component?
no title set?
Yellowstripe scadOP
sorry about my stupidity LOL
try change
return {
title: "123"
}and see if the title change
Yellowstripe scadOP
remove
absolute: ""@Ray remove `absolute: ""`
Yellowstripe scadOP
👠doesn't change anything though
try restart the dev server
@Ray try restart the dev server
Yellowstripe scadOP
nope, but I do know my 404 title works..
which mean cant find the switchItem
@Yellowstripe scad I have it like this now, what am I doing wrong? it doesn't work
ah you should do
import { notFound } from 'next/navigation';
...
if (!switchItem) {
notFound()
}
...Yellowstripe scadOP
Like this?
no
Yellowstripe scadOP
sorry not title
.id
@Ray ah you should do
ts
import { notFound } from 'next/navigation';
...
if (!switchItem) {
notFound()
}
...
no put it in page component
replace
if (!switchItem) {
return <Custom404 />;
}Yellowstripe scadOP
put that in here?
remove it inside generateMetadata
no
Yellowstripe scadOP
I mean in that file
move it to Swtich component
Yellowstripe scadOP
ohh ok
yes
Yellowstripe scadOP
it doesnt work
in generateMetadata
return {
title: "123"
}Yellowstripe scadOP
doesnt work
what is not working
any error?
Yellowstripe scadOP
no errors, Im trying to set my title of the page component to switchItem.id
can you show the code again
Yellowstripe scadOP
you still returning Custom404
Yellowstripe scadOP
I changed it back, that doesnt do anything.
but ok ill change it back to what you say
what you see if you put notFound there
Yellowstripe scadOP
is your item.id a number
Yellowstripe scadOP
it works normally
@Ray is your item.id a number
Yellowstripe scadOP
no, its a string
what you see if you remove default in
app/layout.tsxYellowstripe scadOP
remove this?
@Yellowstripe scad Click to see attachment
no, remove the default here
Yellowstripe scadOP
and the title doesnt work, even for the other pages it was working for before
ah ok keep it
@Ray ah ok keep it
Yellowstripe scadOP
I tried adding a console.log to the generateMetadata and it doesn't even seem to be reaching it
you mean the title of all other page are not working too?
@Ray you mean the title of all other page are not working too?
Yellowstripe scadOP
no, they are all working because they're not dynamic
try put this to switch page and comment out
generateMetadata export const metadata = {
title: "testing"
}see if it works
Yellowstripe scadOP
that does not work
do you think its because of my file structure?
can you liveshare?
@Ray can you liveshare?
Yellowstripe scadOP
screenshare?
vscode plugin > liveshare
does it work
Yellowstripe scadOP
I dont think so
refreshed dev server, doesn't work.
go to /test/123
Yellowstripe scadOP
that works
\
go back to the previous page
Yellowstripe scadOP
ok refresh
Yellowstripe scadOP
try again
Yellowstripe scadOP
try again
Yellowstripe scadOP
try go to /switches/123
Yellowstripe scadOP
oh wow lol
Yellowstripe scadOP
do you think it has something to do with my file structure?
refresh again
no, it looks good
Yellowstripe scadOP
wtf ðŸ˜
ill try to refresh dev server
do you have different browser
@Ray do you have different browser
Yellowstripe scadOP
no
I deleted .next and refreshed dev server, no changes
ah ok i know the problems lol
try again
Yellowstripe scadOP
now it works ðŸ˜
you have 'use client' on top lol
it need to be server component to set the title
Yellowstripe scadOP
I see, how can I fix it.
i show you
Yellowstripe scadOP
👀 looking
like this
does it work?
Yellowstripe scadOP
it works! thank you so so much
np took so long lol
Yellowstripe scadOP
which solution do I mark ðŸ˜
the first one lol
@Ray the first one lol
Yellowstripe scadOP
thank you for not getting annoyed from my incompetence
no prob😀