vercel · samcx · Jul 25, 2024 · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
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