Examples - Updated with-windcss example for App Router (#69365)

This PR updates the with-windcss 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 - Added the layout.tsx file as part of the App Router. - removed <Head> tag - updated package versions cc @samcx --------- Co-authored-by: Sam Ko <sam@vercel.com>
vercel · Aug 27, 2024 · 1a52d9e · 1a52d9e
1 parent 4534458
commit 1a52d9e
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 28 deletions.
diff --git a/examples/with-windicss/app/layout.tsx b/examples/with-windicss/app/layout.tsx
@@ -0,0 +1,19 @@
+import "../styles/globals.css";
+import "windi.css";
+
+export const metadata = {
+  title: "Create Next App",
+  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-windicss/pages/index.tsx → examples/with-windicss/app/page.tsx b/examples/with-windicss/pages/index.tsx → examples/with-windicss/app/page.tsx
@@ -1,15 +1,8 @@
-import type { NextPage } from "next";
-import Head from "next/head";
 import Image from "next/image";
 
-const Home: NextPage = () => {
+export default function Home() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center py-2">
-      <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
       <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
         <h1 className="text-6xl font-bold">
           Welcome to{" "}
@@ -81,6 +74,4 @@ const Home: NextPage = () => {
       </footer>
     </div>
   );
-};
-
-export default Home;
+}
diff --git a/examples/with-windicss/next-env.d.ts b/examples/with-windicss/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-windicss/package.json b/examples/with-windicss/package.json
@@ -7,14 +7,15 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@types/node": "17.0.21",
-    "@types/react": "17.0.40",
-    "typescript": "4.6.2",
-    "windicss": "3.5.1",
-    "windicss-webpack-plugin": "1.6.7"
+    "@types/node": "^22.5.0",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.4",
+    "windicss": "3.5.6",
+    "windicss-webpack-plugin": "1.8.0"
   }
 }
diff --git a/examples/with-windicss/pages/_app.tsx b/examples/with-windicss/pages/_app.tsx