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>
vercel · Jul 25, 2024 · fcdf5a9 · fcdf5a9
1 parent bc89335
commit fcdf5a9
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 102 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/examples/nested-components/components/post.tsx b/examples/nested-components/components/post.tsx
diff --git 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