Querying Data in the Server to Show in Metadata

import React, { ReactNode } from 'react';

import type { Metadata } from 'next';

import { Id } from '@/convex/_generated/dataModel';
import { fetchQuery } from 'convex/nextjs';

import { api } from '../../../../../convex/_generated/api';
import ProjectWrapper from './project-wrapper';

type Props = {
  params: { planId: string };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  // read route params
  const id = params.planId;
  const plan = await fetchQuery(api.plans.queries.getUserPlan, {
    planId: id as Id<'plans'>,
  });

  const projectName = plan?.projectName;
  console.log(plan);

  return {
    title: projectName,
  };
}

export default function PlanLayout({ children }: { children: ReactNode }) {
  return <ProjectWrapper>{children}</ProjectWrapper>;
}

import React, { ReactNode } from 'react';

import type { Metadata } from 'next';

import { Id } from '@/convex/_generated/dataModel';
import { fetchQuery } from 'convex/nextjs';

import { api } from '../../../../../convex/_generated/api';
import ProjectWrapper from './project-wrapper';

type Props = {
  params: { planId: string };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  // read route params
  const id = params.planId;
  const plan = await fetchQuery(api.plans.queries.getUserPlan, {
    planId: id as Id<'plans'>,
  });

  const projectName = plan?.projectName;
  console.log(plan);

  return {
    title: projectName,
  };
}

export default function PlanLayout({ children }: { children: ReactNode }) {
  return <ProjectWrapper>{children}</ProjectWrapper>;
}