Updated/Migrated next-css example to the App Router (#67942)

This PR updates the next-css example to use the App Router. Here are the changes that have been made: Renamed the "pages" folder to "app" folder. Updated the file index.tsx to page.tsx to align with App Router. Updated the file _app.tsx to layout.tsx to align with App Router. Updated the components folder to align with App Router and made components folder private. Updated package.json to use the latest version. cc: @samcx --------- Co-authored-by: ShruthiKathula <[email protected]> Co-authored-by: Sam Ko <[email protected]>
vercel · Jul 19, 2024 · eeff555 · eeff555
1 parent 064a524
commit eeff555
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 13 deletions.
diff --git a/...next-css/component/hello-world.module.css → ...css/app/_component/hello-world.module.css b/...next-css/component/hello-world.module.css → ...css/app/_component/hello-world.module.css
diff --git a/examples/next-css/component/hello-world.tsx → ...s/next-css/app/_component/hello-world.tsx b/examples/next-css/component/hello-world.tsx → ...s/next-css/app/_component/hello-world.tsx
diff --git a/examples/next-css/app/layout.tsx b/examples/next-css/app/layout.tsx
@@ -0,0 +1,13 @@
+import "../style.css";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/next-css/pages/index.tsx → examples/next-css/app/page.tsx b/examples/next-css/pages/index.tsx → examples/next-css/app/page.tsx
@@ -1,4 +1,4 @@
-import HelloWorld from "../component/hello-world";
+import HelloWorld from "./_component/hello-world";
 
 export default function Home() {
   return (

diff --git a/examples/next-css/package.json b/examples/next-css/package.json
@@ -7,13 +7,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "18.11.5",
-    "@types/react": "18.2.8",
-    "@types/react-dom": "18.0.7",
-    "typescript": "4.8.4"
+    "@types/node": "^20.14.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.3"
   }
 }
diff --git a/examples/next-css/pages/_app.tsx b/examples/next-css/pages/_app.tsx