Metadata does not load on a single route, any suggestions?

[maiden cosmos]

I have a Next 13 app dir project in production, I am seeing the metadata for all routes except one specific route.

Attached is a screenshot of the project directory, the /cabins route has a page.tsx which is a client component and it also uses useSearchParams, and a layout.tsx where I define the metadata.

I use useSearchParams to set a query on the URI either /cabins?category=general or /cabins?category=accommodation

Here is the layout.tsx code:

    return {
        title: 'Our Cabins | Site Name',
        description:
            'Browse our selection of portable cabins, each designed with comfort and functionality in mind. Find the perfect cabin for your needs.',
        locale: 'en_NZ',
        type: 'website',
        url: 'https://www.sitename.co.nz/cabins',
        siteName: 'Site Name',
        keywords: [
            'cabins nz',
            'portable cabins',
            'portable cabins nz',
            'portable buildings',
            'portable buildings nz',
            'trademe portable cabins',
            'trademe portable buildings',
            'just cabins',
            'cabins',
            'cabins for sale',
            'kitset cabins nz',
            'tiny homes',
            'tiny homes nz',
            'tiny homes for sale',
            'tiny homes for sale nz',
            'nz tiny homes',
            'small homes nz',
            'small cabins nz',
        ],
    }
}

export default function CabinsLayout({ children }: { children: React.ReactNode }) {
    return <section>{children}</section>
}```

This layout.tsx code works for all other routes without any issues.

This route also has dynamic child routes [model] slug which just has a page.tsx and the metadata is generated there and is working for all the model routes.
If anyone can see what i'm doing wrong, please let me know, any help is appreciated, thanks in advanced!

Below attached is also the start of the /cabins page.tsx

[lunar crescent]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[maiden cosmos]

Still wasn't able to fix this, any help from the community is much appreciated!

[forest summit]

dunno if it is related to your issue, but the metadata API (metadata and generateMetadata) doesn't work in client component layouts/pages

if you want the metadata API to work, ensure the file it is in does not have use client

[maiden cosmos]

My page.tsx does have 'use client' but my layout.tsx doesn't which is why I am using the layout.tsx for only the metadata. I have similar scenarios for other routes as I just described and it works there, I really think it has something to due with my use of useSearchParams or the fact that I have a child route thats a dynamic slug in the same directory.

[forest summit]

You probably accidentally made your page client-side rendered then https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering

In that case the metadata api doesn’t work

Add a Suspense that wraps the component using useSearchParams

[maiden cosmos]

Good catch! Didn't notice this in the docs. Thanks, will try it now!

Will report back in a bit

Can you wrap an entire page with a supsense like you'd usually do with a Fragment?

[forest summit]

The part that is client side rendered, so you have to make the part inside Suspense as small as possible for SEO

But yes you can just use Suspense wrapping your entire page

[maiden cosmos]

Wrapping the whole page didn't work, but I will continue to play with it.

Perhaps you can give me a suggestion?

[forest summit]

in the layout wrapping this page, change

{children}

to

{/* !!! Crawlers won't see any page content !!! */}
<Suspense>
  {children}
</Suspense>

[maiden cosmos]

Ok, will give it that a try, not really worried about the crawlers at the moment.. more focused on the social sharing link aspect so don't mind wrapping the layout.

That worked, big thanks, was stuck on this for a few days!

[forest summit]

the reason is that you have to wrap the component using useSearchParams in Suspense

and in your case, that component is the Page component itself

that's why you have to use Suspense in a place 'higher' than the Page component in the react hierarchy