Hi all,
I'm working on my first nextjs project and running into a tiny issue that has me scratching my head. I have dynamic data loading and would like the title of this data to be displayed as the page title. I have this working using the generateMetadata function and it works great when loading a page directly or a hard refresh. BUT when changing pages via a link the metadata doesn't seem to be updating. I have console logged the function and it is running with the correct data on the server but for some reason it isn't getting changing the tags (title, meta) in the page.

The pages/layouts up the tree from this page have static metadata. This is from the app/pins/id/[pinId]/page.tsx

export async function generateMetadata({ params: { pinId } }: PinProps): Promise<Metadata> {
  const pin = await getPinById(pinId);
  const details = pin ? `${pin.franchise} - ${pin.description}` : "Unable to load pin data";
  const metadata = {
    title: details,
    description: details,
  };
  return metadata;
}

If I add console logs they display correctly. If I go to Id 2 and linke to Id 3 then the title stays with the details of Id 2!

Thank you so much in advance! I appreciate anyones help and am really enjoying the nextjs experience