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]>
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import Link from "../_components/Link";
|
|
import { MUX_HOME_PAGE_URL } from "../constants";
|
|
|
|
export default function Layout({
|
|
children,
|
|
}: Readonly<{ children: React.ReactNode }>) {
|
|
return (
|
|
<>
|
|
<header className="mb-8">
|
|
<h1 className="font-bold text-4xl lg:text-5xl mb-2">
|
|
Welcome to Mux + Next.js
|
|
</h1>
|
|
<p className="italic">Get started by uploading a video</p>
|
|
</header>
|
|
<p className="mb-4">
|
|
<Link
|
|
href={MUX_HOME_PAGE_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Mux
|
|
</Link>{" "}
|
|
provides APIs for developers working with video.
|
|
<br />
|
|
This example is useful if you want to build:
|
|
</p>
|
|
<ul className="list-disc pl-8 mb-4">
|
|
<li>A video on demand service like Youtube or Netflix</li>
|
|
<li>
|
|
A platform that supports user uploaded videos like TikTok or Instagram
|
|
</li>
|
|
<li>Video into your custom CMS</li>
|
|
</ul>
|
|
<p className="mb-4">
|
|
Uploading a video uses the Mux{" "}
|
|
<Link href="https://docs.mux.com/docs/direct-upload">
|
|
direct upload API
|
|
</Link>
|
|
. When the upload is complete your video will be processed by Mux and
|
|
available for playback on a sharable URL.
|
|
</p>
|
|
<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>
|
|
<hr className="my-8 bg-gray-500" />
|
|
{children}
|
|
</>
|
|
);
|
|
}
|