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 {children}
;
+}
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 (
+
+
{title}
+ {children}
+
+ );
+}
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 (
+
+ {children}
+
+ );
+}
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 (
+
+
+ Hello there
+ This is an example of a componentized blog post
+
+
+
+ Hello there
+ This is another example.
+ Wa-hoo!
+
+
+
+ C’est fin
+
+
- {children}
-
-
- );
-}
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 (
-
-
{title}
- {children}
-
-
- );
-}
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 (
-
-
- Hello there
- This is an example of a componentized blog post
-
-
-
-
-
- Hello there
- This is another example.
- Wa-hoo!
-
-
-
-
-
- C’est fin
-
-
-
-