Next.js Discord

Discord Forum

Adding dynamic MetaData

Answered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
Hello guys, hope u are doing great, I'm curious about smth.
How can I add the name of my car to the title of my page ( Metadata title ) ?
I'm kinda new to these types of things in nextJS and I would really like to have your help.

Exemple of code : 

import React from "react";
import { fetchCar } from "/api/Cars/fetchingDataOfCar";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Car Details",
  description: "Generated by create next app",
};

async function Cars({ params }: any) {
  const car = await fetchCar(params.id);

  return <>{car.name}</>;
}

export default Cars;
Answered by B33fb0n3
you can do it like this:
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> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  return {
    title: product.title,
  }
}
 
export default function Page({ params, searchParams }: Props) {
    // do other stuff
}

See more here: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
View full answer

12 Replies

@Sun bear Hello guys, hope u are doing great, I'm curious about smth. How can I add the name of my car to the title of my page ( Metadata title ) ? I'm kinda new to these types of things in nextJS and I would really like to have your help. Exemple of code : tsx import React from "react"; import { fetchCar } from "/api/Cars/fetchingDataOfCar"; import type { Metadata } from "next"; export const metadata: Metadata = { title: "Car Details", description: "Generated by create next app", }; async function Cars({ params }: any) { const car = await fetchCar(params.id); return <>{car.name}</>; } export default Cars;
B33fb0n3
you can do it like this:
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> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  return {
    title: product.title,
  }
}
 
export default function Page({ params, searchParams }: Props) {
    // do other stuff
}

See more here: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
Answer
Child component : 

import React from "react";
import { Metadata, ResolvingMetadata } from "next";

export async function generateMetadata(
  { params, searchParams }: any,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const exempleResponse = await fetch(
    "https://jsonplaceholder.typicode.com/posts"
  );
  const exemple = await exempleResponse.json();
  return {
    title: exemple[0].title, // par exemple, prendre le titre du premier post
  };
}

async function Ex() {
  const exempleResponse = await fetch(
    "https://jsonplaceholder.typicode.com/posts"
  );
  const exemples = await exempleResponse.json();

  return <div>Exemple de titre : {exemples[0].title}</div>;
}

export default Ex;
Do you know how can i make it works when it is used in a child component ?
B33fb0n3
it doesn't work anymore
Can you clarify?
@B33fb0n3 > it doesn't work anymore Can you clarify?
Sun bearOP
I had a page.tsx where I put your code ( modified ) and my title was rendered dynamicaly , then i tried to create a child component to see what it would do if I put this generateMetadata in my child component, and it doesn't worked anymore.

So I guess I must put this generateMetadata in my parent component.
Thanks for your advices it helped me a lot ! @ᴉuɐpɹɐɐ @B33fb0n3
ᴉuɐpɹɐɐ
generateMetadata works since its exported in a file-convention like page.js and layout.js
cant just use it everywhere
@ᴉuɐpɹɐɐ cant just use it everywhere
Sun bearOP
oh nice didn't know it thanks ;)
B33fb0n3