updated the example of with-three-js to utilize the App Router (#70287)

This PR updates the with-three-js 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 `/`, `/birds` & `/boxes` files to align with the App Router. - Added the `layout.tsx` & `tsconfig.json` 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 20, 2024 · e3688fb · e3688fb
1 parent cf59073
commit e3688fb
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 16 deletions.
diff --git a/examples/with-three-js/components/Bird.js → ...les/with-three-js/app/_components/Bird.js b/examples/with-three-js/components/Bird.js → ...les/with-three-js/app/_components/Bird.js
diff --git a/examples/with-three-js/components/Box.js → ...ples/with-three-js/app/_components/Box.js b/examples/with-three-js/components/Box.js → ...ples/with-three-js/app/_components/Box.js
diff --git a/examples/with-three-js/pages/birds.js → examples/with-three-js/app/birds/page.tsx b/examples/with-three-js/pages/birds.js → examples/with-three-js/app/birds/page.tsx
@@ -1,12 +1,14 @@
+"use client";
+
 import { Suspense, useMemo } from "react";
 import { Canvas } from "@react-three/fiber";
 import { OrbitControls } from "@react-three/drei";
-import Bird from "../components/Bird";
+import Bird from "../_components/Bird";
 
 export default function BirdsPage() {
   const birds = useMemo(
     () =>
-      new Array(10).fill().map((_, index) => {
+      new Array(10).fill(undefined).map((_, index) => {
         const x =
           (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1);
         const y = -10 + Math.random() * 20;

diff --git a/examples/with-three-js/pages/boxes.js → examples/with-three-js/app/boxes/page.tsx b/examples/with-three-js/pages/boxes.js → examples/with-three-js/app/boxes/page.tsx
@@ -1,6 +1,8 @@
+"use client";
+
 import { Canvas } from "@react-three/fiber";
 import { OrbitControls } from "@react-three/drei";
-import Box from "../components/Box";
+import Box from "../_components/Box";
 
 export default function BoxesPage() {
   return (

diff --git a/examples/with-three-js/app/layout.tsx b/examples/with-three-js/app/layout.tsx
@@ -0,0 +1,18 @@
+import "../styles/index.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-three-js/pages/index.js → examples/with-three-js/app/page.tsx b/examples/with-three-js/pages/index.js → examples/with-three-js/app/page.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-export default function IndexPage() {
+export default function Home() {
   return (
     <div className="main">
       <Link href="/birds">Birds Example</Link>

diff --git a/examples/with-three-js/package.json b/examples/with-three-js/package.json
@@ -6,11 +6,17 @@
     "start": "next start"
   },
   "dependencies": {
-    "@react-three/drei": "9.3.4",
-    "@react-three/fiber": "8.0.10",
+    "@react-three/drei": "^9.112.1",
+    "@react-three/fiber": "^8.17.7",
     "next": "latest",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "three": "0.139.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "three": "^0.168.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.2"
   }
 }
diff --git a/examples/with-three-js/pages/_app.js b/examples/with-three-js/pages/_app.js
diff --git a/examples/with-three-js/pages/index.css → examples/with-three-js/styles/index.css b/examples/with-three-js/pages/index.css → examples/with-three-js/styles/index.css
diff --git a/examples/with-three-js/tsconfig.json b/examples/with-three-js/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}