From fcdf5a9a266191dfa3e0f13311db02e21343e979 Mon Sep 17 00:00:00 2001
From: Shruthireddy04 <shruthireddykathula@gmail.com>
Date: Fri, 26 Jul 2024 01:22:14 +0530
Subject: [PATCH] Updated nested-components example to use App Router (#68065)

This PR updates the nested-components 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.
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 <147117812+ShruthiKathula@users.noreply.github.com>
Co-authored-by: samcx <sam@vercel.com>
---
 examples/nested-components/README.md          |  2 +-
 .../app/_components/paragraph.tsx             |  7 +++
 .../app/_components/post.module.css           |  7 +++
 .../app/_components/post.tsx                  | 15 ++++++
 examples/nested-components/app/globals.css    | 24 ++++++++++
 examples/nested-components/app/layout.tsx     | 18 +++++++
 .../nested-components/app/page.module.css     |  5 ++
 examples/nested-components/app/page.tsx       | 25 ++++++++++
 .../components/paragraph.tsx                  | 19 --------
 .../nested-components/components/post.tsx     | 28 -----------
 examples/nested-components/package.json       | 14 +++---
 examples/nested-components/pages/index.tsx    | 47 -------------------
 12 files changed, 109 insertions(+), 102 deletions(-)
 create mode 100644 examples/nested-components/app/_components/paragraph.tsx
 create mode 100644 examples/nested-components/app/_components/post.module.css
 create mode 100644 examples/nested-components/app/_components/post.tsx
 create mode 100644 examples/nested-components/app/globals.css
 create mode 100644 examples/nested-components/app/layout.tsx
 create mode 100644 examples/nested-components/app/page.module.css
 create mode 100644 examples/nested-components/app/page.tsx
 delete mode 100644 examples/nested-components/components/paragraph.tsx
 delete mode 100644 examples/nested-components/components/post.tsx
 delete mode 100644 examples/nested-components/pages/index.tsx

diff --git a/examples/nested-components/README.md b/examples/nested-components/README.md
index 58de07c217304..0ff8c88545d8a 100644
--- a/examples/nested-components/README.md
+++ b/examples/nested-components/README.md
@@ -1,6 +1,6 @@
 # Example app using nested components
 
-Taking advantage of the composable nature of React components we can modularize our apps in self-contained, meaningful components. This example has a page under `pages/index.tsx` that uses `components/paragraph.tsx` and `components/post.tsx` that can be styled and managed separately.
+Taking advantage of the composable nature of React components we can modularize our apps in self-contained, meaningful components. This example has a page under `app/page.tsx` that uses `app/_components/paragraph.tsx` and `app/_components/post.tsx` that can be styled and managed separately.
 
 ## Deploy your own
 
diff --git a/examples/nested-components/app/_components/paragraph.tsx b/examples/nested-components/app/_components/paragraph.tsx
new file mode 100644
index 0000000000000..c3b325a639f48
--- /dev/null
+++ b/examples/nested-components/app/_components/paragraph.tsx
@@ -0,0 +1,7 @@
+type ParagraphProps = {
+  children: React.ReactNode;
+};
+
+export default function Paragraph({ children }: ParagraphProps) {
+  return <p>{children}</p>;
+}
diff --git a/examples/nested-components/app/_components/post.module.css b/examples/nested-components/app/_components/post.module.css
new file mode 100644
index 0000000000000..c7fa5b5e73d31
--- /dev/null
+++ b/examples/nested-components/app/_components/post.module.css
@@ -0,0 +1,7 @@
+.main {
+  font:
+    15px Helvetica,
+    Arial;
+  border: 1px solid #eee;
+  padding: 0 10px;
+}
diff --git a/examples/nested-components/app/_components/post.tsx b/examples/nested-components/app/_components/post.tsx
new file mode 100644
index 0000000000000..67d437affed6e
--- /dev/null
+++ b/examples/nested-components/app/_components/post.tsx
@@ -0,0 +1,15 @@
+import styles from "./post.module.css";
+
+type PostProps = {
+  title: string;
+  children: React.ReactNode;
+};
+
+export default function Post({ title, children }: PostProps) {
+  return (
+    <div className={styles.main}>
+      <h1>{title}</h1>
+      {children}
+    </div>
+  );
+}
diff --git a/examples/nested-components/app/globals.css b/examples/nested-components/app/globals.css
new file mode 100644
index 0000000000000..b17198482351c
--- /dev/null
+++ b/examples/nested-components/app/globals.css
@@ -0,0 +1,24 @@
+h1 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+p {
+  font:
+    13px Helvetica,
+    Arial;
+  margin: 10px 0;
+}
+
+hr {
+  width: 100px;
+  border-width: 0;
+  margin: 20px auto;
+  text-align: center;
+}
+
+hr::before {
+  content: "***";
+  color: #ccc;
+}
diff --git a/examples/nested-components/app/layout.tsx b/examples/nested-components/app/layout.tsx
new file mode 100644
index 0000000000000..ed1e5e2dde75a
--- /dev/null
+++ b/examples/nested-components/app/layout.tsx
@@ -0,0 +1,18 @@
+import "./globals.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/nested-components/app/page.module.css b/examples/nested-components/app/page.module.css
new file mode 100644
index 0000000000000..a2e14958a1eac
--- /dev/null
+++ b/examples/nested-components/app/page.module.css
@@ -0,0 +1,5 @@
+.main {
+  margin: auto;
+  max-width: 420px;
+  padding: 10px;
+}
diff --git a/examples/nested-components/app/page.tsx b/examples/nested-components/app/page.tsx
new file mode 100644
index 0000000000000..3e8c5c7cde7aa
--- /dev/null
+++ b/examples/nested-components/app/page.tsx
@@ -0,0 +1,25 @@
+import P from "./_components/paragraph";
+import Post from "./_components/post";
+
+import styles from "./page.module.css";
+
+export default function Home() {
+  return (
+    <div className={styles.main}>
+      <Post title="My first blog post">
+        <P>Hello there</P>
+        <P>This is an example of a componentized blog post</P>
+      </Post>
+      <hr />
+      <Post title="My second blog post">
+        <P>Hello there</P>
+        <P>This is another example.</P>
+        <P>Wa-hoo!</P>
+      </Post>
+      <hr />
+      <Post title="The final blog post">
+        <P>C’est fin</P>
+      </Post>
+    </div>
+  );
+}
diff --git a/examples/nested-components/components/paragraph.tsx b/examples/nested-components/components/paragraph.tsx
deleted file mode 100644
index 815587f4bfb6c..0000000000000
--- a/examples/nested-components/components/paragraph.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-type ParagraphProps = {
-  children: React.ReactNode;
-};
-
-export default function Paragraph({ children }: ParagraphProps) {
-  return (
-    <p>
-      {children}
-      <style jsx>{`
-        p {
-          font:
-            13px Helvetica,
-            Arial;
-          margin: 10px 0;
-        }
-      `}</style>
-    </p>
-  );
-}
diff --git a/examples/nested-components/components/post.tsx b/examples/nested-components/components/post.tsx
deleted file mode 100644
index 7e93d63ba95d3..0000000000000
--- a/examples/nested-components/components/post.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-type PostProps = {
-  title: string;
-  children: React.ReactNode;
-};
-
-export default function Post({ title, children }: PostProps) {
-  return (
-    <div className="main">
-      <h1>{title}</h1>
-      {children}
-      <style jsx>{`
-        .main {
-          font:
-            15px Helvetica,
-            Arial;
-          border: 1px solid #eee;
-          padding: 0 10px;
-        }
-
-        h1 {
-          font-size: 16px;
-          font-weight: bold;
-          margin: 10px 0;
-        }
-      `}</style>
-    </div>
-  );
-}
diff --git a/examples/nested-components/package.json b/examples/nested-components/package.json
index be18b903df87a..340e25356b520 100644
--- a/examples/nested-components/package.json
+++ b/examples/nested-components/package.json
@@ -1,19 +1,19 @@
 {
   "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"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^18.11.5",
-    "@types/react": "^18.0.23",
-    "@types/react-dom": "^18.0.7",
-    "typescript": "^4.8.4"
+    "@types/node": "^20.14.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.4"
   }
 }
diff --git a/examples/nested-components/pages/index.tsx b/examples/nested-components/pages/index.tsx
deleted file mode 100644
index 52d1c8d69d746..0000000000000
--- a/examples/nested-components/pages/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import P from "../components/paragraph";
-import Post from "../components/post";
-
-export default function Home() {
-  return (
-    <div className="main">
-      <Post title="My first blog post">
-        <P>Hello there</P>
-        <P>This is an example of a componentized blog post</P>
-      </Post>
-
-      <hr />
-
-      <Post title="My second blog post">
-        <P>Hello there</P>
-        <P>This is another example.</P>
-        <P>Wa-hoo!</P>
-      </Post>
-
-      <hr />
-
-      <Post title="The final blog post">
-        <P>C’est fin</P>
-      </Post>
-
-      <style jsx>{`
-        .main {
-          margin: auto;
-          max-width: 420px;
-          padding: 10px;
-        }
-
-        hr {
-          width: 100px;
-          border-width: 0;
-          margin: 20px auto;
-          text-align: center;
-        }
-
-        hr::before {
-          content: "***";
-          color: #ccc;
-        }
-      `}</style>
-    </div>
-  );
-}