updated the example of with-videojs to utilize the App Router (#70226)

This PR updates the with-videojs example to use the App Router. Here are the changes that have been made: - Renamed the pages folder to the app folder. - Updated the routing for / files to align with the App Router. - Added the layout.tsx file as part of the App Router. - Updated the package.json file. The following actions were performed as part of this PR: - Ran `pnpm prettier-check `with no issues found. - Executed the `pnpm check-examples` script. CC: @samcx --------- Co-authored-by: samcx <sam@vercel.com>
vercel · Sep 18, 2024 · cc8b809 · cc8b809
1 parent 6d46b17
commit cc8b809
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 22 deletions.
diff --git a/examples/with-videojs/components/Player.tsx → ...s/with-videojs/app/_components/Player.tsx b/examples/with-videojs/components/Player.tsx → ...s/with-videojs/app/_components/Player.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useEffect, useState } from "react";
 import videojs from "video.js";
 import "videojs-youtube";

diff --git a/...les/with-videojs/components/PlayerCss.tsx → ...ith-videojs/app/_components/PlayerCss.tsx b/...les/with-videojs/components/PlayerCss.tsx → ...ith-videojs/app/_components/PlayerCss.tsx
diff --git a/examples/with-videojs/app/layout.tsx b/examples/with-videojs/app/layout.tsx
@@ -0,0 +1,18 @@
+import "video.js/dist/video-js.css";
+
+export const metadata = {
+  title: "Next.js",
+  description: "Generated by Next.js",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/with-videojs/pages/index.tsx → examples/with-videojs/app/page.tsx b/examples/with-videojs/pages/index.tsx → examples/with-videojs/app/page.tsx
@@ -1,7 +1,8 @@
-import Player from "../components/Player";
-import PlayerCSS from "../components/PlayerCss";
+// app/page.tsx
+import Player from "./_components/Player";
+import PlayerCSS from "./_components/PlayerCss";
 
-export default function Index() {
+export default function Home() {
   const videoJsOptions = {
     techOrder: ["youtube"],
     autoplay: false,

diff --git a/examples/with-videojs/next-env.d.ts b/examples/with-videojs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/examples/with-videojs/package.json b/examples/with-videojs/package.json
@@ -1,22 +1,22 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "video.js": "^7.20.3",
-    "videojs-youtube": "^2.6.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "video.js": "^8.17.4",
+    "videojs-youtube": "^3.0.1"
   },
   "devDependencies": {
-    "@types/node": "^18.11.9",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "@types/video.js": "^7.3.49",
-    "typescript": "^4.9.3"
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
+    "@types/video.js": "^7.3.58",
+    "typescript": "^5.6.2"
   }
 }
diff --git a/examples/with-videojs/pages/_app.tsx b/examples/with-videojs/pages/_app.tsx
diff --git a/examples/with-videojs/tsconfig.json b/examples/with-videojs/tsconfig.json
@@ -13,8 +13,19 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "videojs.d.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "videojs.d.ts",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }