with-mux-video: updates for next 15 compat

examples/with-mux-video/app/(upload)/asset/[assetId]/page.tsx

@@ -33,11 +33,17 @@ const checkAssetStatus = async (assetId: string): Promise<Status> => {
 // For this example, calling the Mux API on each request and then polling is sufficient.
 export const dynamic = "force-dynamic";
 
-export default async function Page({
-  params: { assetId },
-}: {
-  params: { assetId: string };
-}) {
+export default async function Page(
+  props: {
+    params: Promise<{ assetId: string }>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    assetId
+  } = params;
+
   const initialStatus = await checkAssetStatus(assetId);
   return (
     <AssetStatusPoll

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

@@ -8,31 +8,35 @@ type Params = {
 };
 
 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: {
+export const generateMetadata = async (props: { params: Promise<Params> }) => {
+  const params = await props.params;
+
+  return ({
     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,
-      },
-    ],
-  },
-});
+    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">
@@ -44,7 +48,13 @@ const Code = ({ children }: { children: React.ReactNode }) => (
 // it's perfect for the edge
 export const runtime = "edge";
 
-export default function Page({ params: { playbackId } }: { params: Params }) {
+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">

examples/with-mux-video/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }