Metadata in codegen App router Next.js

Plasmic Studio Questions
1

Hello! I faced with issue in codegen.

image
image1408×1232 122 KB

It generate wrapper in app router approach. It doesn’t work… Needs use Metadata object! Do you have any ideas how I can handle it?

2

Hi @uladzislau_bairash, this is currently possible with pages router.

We are currently working on a solution for app router that would handle dynamic metadata.

3

We don’t need the dynamic metadata. We would be glad to have static with:
const metadata = {}. Is it possible in app router? Looks like you need to update rules of code generation for app router: change tags to object metadata

4

Hello, just want to ping you, about metadata updating in Next.js app router. Maybe is some plans by implementation?

5

Hi @uladzislau_bairash, metadata based on static content in Plasmic should be possible. You want to use Next.js’s generated metadata to fetch Plasmic metadata.

Here’s roughly what it looks like:

// Assumes you're on catchall page.
export async function generateMetadata(
  { params }: { params: Promise<{ catchall: string[] | undefined; }> },
  parent: ResolvingMetadata
): Promise<Metadata> {
  const pagePath = catchall ? `/${catchall.join("/")}` : "/";
  const prefetchedData = await PLASMIC.maybeFetchComponentData(pagePath);
  if (!prefetchedData || prefetchedData.entryCompMetas.length === 0) {
    notFound();
  }

  const pageMeta = prefetchedData.entryCompMetas[0];
  return {
    ...((await parent) as Metadata),
    ...pageMeta.pageMetadata,
  };
}

I’ll link to a working example project soon.

6

Here is a commit you can see how I added metadata to some existing app router projects: Add app router generateMetadata examples (#1583) · plasmicapp/plasmic@0450597 · GitHub