next.js/examples/with-mux-video/app/v/[playbackId]/page.tsx

import Link from "@/app/_components/Link";
import MuxPlayer from "./MuxPlayer";
import { MUX_HOME_PAGE_URL } from "@/app/constants";
import Script from "next/script";

type Params = {
  playbackId: string;
};

const title = "View this video created with Mux + Next.js";
export const generateMetadata = async (props: { params: Promise<Params> }) => {
  const params = await props.params;

  return {
    title,
    description: undefined,
    openGraph: {
      title,
      images: [
        {
          url: `https://image.mux.com/${params.playbackId}/thumbnail.png?width=1200&height=630&fit_mode=pad`,
          width: 1200,
          height: 630,
        },
      ],
    },
    twitter: {
      title,
      card: "summary_large_image",
      images: [
        {
          url: `https://image.mux.com/${params.playbackId}/thumbnail.png?width=1200&height=600&fit_mode=pad`,
          width: 1200,
          height: 600,
        },
      ],
    },
  };
};

const Code = ({ children }: { children: React.ReactNode }) => (
  <code className="text-mono text-sm bg-red-500/10 px-1 py-0.5 rounded-sm">
    {children}
  </code>
);

export default async function Page(props: { params: Promise<Params> }) {
  const params = await props.params;

  const { playbackId } = params;

  return (
    <>
      <div className="px-8 py-4 mb-8 text-center bg-green-500/30 rounded-full">
        This video is ready for playback
      </div>
      <div className="bg-black aspect-video mb-8 -mx-4 flex">
        <MuxPlayer
          className="w-full"
          playbackId={playbackId}
          metadata={{ player_name: "with-mux-video" }}
          accentColor="rgb(220 38 38)"
        />
      </div>
      <p>
        Go <Link href="/">back home</Link> to upload another video.
      </p>
      <hr className="my-8 bg-gray-500" />
      <p className="mb-4">
        This video was uploaded and processed by{" "}
        <Link
          href={MUX_HOME_PAGE_URL}
          target="_blank"
          rel="noopener noreferrer"
        >
          Mux
        </Link>
        . This page was rendered with{" "}
        <Link
          href="https://nextjs.org/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Next.js
        </Link>
        .
      </p>
      <p className="mb-4">
        Thanks to the Next.js{" "}
        <Link href="https://nextjs.org/docs/app/building-your-application/optimizing/metadata">
          Metadata API
        </Link>
        , this page is easily sharable on social and has an{" "}
        <Code>og:image</Code> thumbnail generated by Mux. Try clicking the
        Twitter button below to share:
      </p>
      <p className="mb-4 min-h-7">
        <Link
          className="twitter-share-button"
          data-size="large"
          target="_blank"
          rel="noopener noreferrer"
          href="https://twitter.com/intent/tweet?text=Check%20out%20the%20video%20I%20uploaded%20with%20Next.js%2C%20%40Vercel%2C%20and%20%40muxhq%20"
        >
          Tweet this
        </Link>
      </p>
      <Script
        strategy="lazyOnload"
        async
        src="https://platform.twitter.com/widgets.js"
      />
      <p>
        To learn more,{" "}
        <Link
          href="https://github.com/vercel/next.js/tree/canary/examples/with-mux-video"
          target="_blank"
          rel="noopener noreferrer"
        >
          check out the source code on GitHub
        </Link>
        .
      </p>
    </>
  );
}