mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
eace44d129
## App Router Moves the `with-mux-video` example to idiomatic App Router, with goodies like * server component data fetching * server actions * layouts * route groups * loading UI ## Mux Dependencies * @mux/mux-node 7 -> 8 * @mux/mux-player-react 1 -> 2 * @mux/upchunk + custom UI -> @mux/mux-uploader ## In other news... * Fleshed out the README * Updated imagery * Moved from styled jsx to tailwind and lightly updated styles ## Contributor Checklist * [x] The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md * [x] Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md --------- Co-authored-by: Sam Ko <[email protected]>
123 lines
3.4 KiB
TypeScript
123 lines
3.4 KiB
TypeScript
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 = ({ params }: { params: Params }) => ({
|
|
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>
|
|
);
|
|
|
|
// this function communicates with no external services and relies on no Node APIs
|
|
// it's perfect for the edge
|
|
export const runtime = "edge";
|
|
|
|
export default function Page({ params: { playbackId } }: { params: 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>
|
|
</>
|
|
);
|
|
}
|