generateMetadata not returning params as expected

[fredrivett]

I'm in the process of upgrading to the new /app directory setup, and want to implement dynamic meta data for a blog post. I've been following the Metadata guide for generateMetadata, but I can't seem to reproduce the expected behaviour.

Specifically, I'm not seeing any props passed through to the generateMetadata function.

I have the following page at src/app/products/[id]/page.tsx:

export async function generateMetadata(props) {
  console.log("generateMetadata: props", props);
  return {};
}

const Page = async (props) => {
  console.log("Component: props", props);
  return props.params.id;
};

export default Page;

When I go to the page http://localhost:3000/products/myproduct/ in my browser, I see the following logs in the server console:

Component: props { params: { id: 'myproduct' }, searchParams: {} }
generateMetadata: props {}

As you can see, the component is receiving the props as expected, with params containing the correct param for id, but generateMetadata doesn't receive them, despite the docs seeming to state it should.

I'm probably doing something obvious wrong but having spent an hour on this I can't figure it out, so any help or tips would be much appreciated.

I'm on next v13.1.6.

[101budspencer]

I got the same issue.
Did you solve it?

[fredrivett]

Sadly not, still trying to work out what’s going on, will report back if I get a breakthrough, let me know if you manage to make any progress.

[oBusk]

@fredrivett Looks like you were using the wrong version of Next.js.

In v13.1.6 (January 28) it looked like this

next.js/packages/next/src/lib/metadata/resolve-metadata.ts

Line 384 in be86fcf

// TODO: Rewrite this to pass correct params and resolving metadata value.

The PR to implement generateMetadata, #45401 was merged Feb 1. So generateMetadata() was supported as of 13.1.7-canary.2, or v13.2.0, released February 23.

Testing it in Next.js 13.3.0 seems to be working as expected

[vManzanilla1984]

You must upgrate your next version ( https://nextjs.org/docs/pages/building-your-application/upgrading/version-13 )

 `npm i next@latest react@latest react-dom@latest eslint-config-next@latest`

and enable the experimental.serverActions inside the next.config file

[Zelig880]

I am on Next.js 13.4.19 and still do not have the parameter.

This is what I see if I try to access /blog/[slug]?a=1 (mysite.com/blog/my-article?a-1)

[Zelig880]

Ok.. I have found the "issue" with my code, even if it is not really an issue but something that I would not expect to be honest and may probably be either documented or changed within Next.js.

(please someone correct me if I am wrong)
It seems that the "generateMetadata" is actually triggered by the different layer of the application, so for example the wrapper layers calls it, then the inner pages and then the last child.

My expectation was that no matter who called it, the value for a page such as /blog/[slug] were always set, but this does not actually seem to be the case.

So for example if I console log the "params" generated by the next.js package for a single page, this is what I get:

I have not investigated further, but this means that if I access the generateMetadata in the main root of the site, my params are empty, while if I create a layout file within the [SLUG] folder, the params are set.

So to solve my issue, I had to add a layout.tsx file in each "dynamic" page so that I was able to override the canonical.

[SaabK]

tysm

[sz0tu]

Use middleware to set your queryParams to cookie.

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const YOUR_VALUE = request.nextUrl.searchParams.get("YOUR_VALUE");
  const response = NextResponse.next();

  if (refId) {
    response.cookies.set("temp-YOUR_VALUE", YOUR_VALUE, {
      maxAge: 60,
      httpOnly: true,
      path: "/",
    });
  }

  return response;
}

export const config = {
  matcher: "/",
};

then

export async function generateMetadata(): Promise<Metadata> {
  const cookieStore = await cookies();
  const YOUR_VALUE = cookieStore.get("YOUR_VALUE")?.value;
}