Replies: 1 comment
-
|
Hi, I think I answered this over at Reddit? For echoing sake, this is Streaming Metadata. https://nextjs.org/docs/app/api-reference/functions/generate-metadata#streaming-metadata, https://nextjs.org/blog/next-15-2#streaming-metadata You can see a practical example here, #79404 (comment) where the Slurp user agent is used, and the response has metadata in head. For other user agents the metadata can be streamed to not block sending UI back to the client. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Hi all,
I’m a beginner in Next.js and I know I might be “benching above my weight class” here 😅, but I’m trying to get dynamic SEO working with the App Router in Next.js 15.
Here’s my setup:
Project path:
C:\Users\ah\Desktop\syrian-market-next\src\app[locale]\posts[...slug]\page.js
I’m using dynamic routes ([...slug]) with a fetchHouse(id) function to fetch house data from my backend.
I’m attempting to generate dynamic metadata (title, description, canonical URL, OpenGraph) using the generateMetadata function.
Example of metadata I want to generate:
return {
title:
${house.title} in ${house.location} | Syrian Market,description: house.description,
alternates: { canonical:
https://example.com/${params.locale}/posts/${house._id}},openGraph: {
title:
${house.title} in ${house.location} | Syrian Market,description: house.description,
url:
https://example.com/${params.locale}/posts/${house._id},type: "website",
images: house.images?.[0] ? [house.images[0]] : [],
},
};
Problem:
When I add url or type: "website" in the OpenGraph metadata, the title and description start showing inside the instead of .
I’ve checked my layout.js and I have present.
I removed any client-only components from the layout.
I know that in the App Router, generateMetadata runs on the server, so I expected the SEO tags to render correctly in .
I feel like I’m missing some key concept about Server Components vs Client Components or the App Router’s metadata injection, but I’m unsure what exactly.
I’d love to hear:
Has anyone run into the same behavior in Next.js 15 App Router?
Are there specific patterns for dynamic metadata with type "website" or canonical URLs that avoid this issue?
Any beginner-friendly explanation of why the metadata would end up in instead of ?
Thanks in advance! I’m trying to learn, and any guidance is appreciated 🙏.
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions