From a9c75dac35a68a64e26b705ffc63ffc3444a1eb7 Mon Sep 17 00:00:00 2001
From: Henrik Wenz <henrik.wenz@gmail.com>
Date: Mon, 22 Aug 2022 11:14:43 +0200
Subject: [PATCH] [docs] Migrate dynamic routing example to typescript

---
 examples/dynamic-routing/components/header.js | 30 -------------------
 .../dynamic-routing/components/header.tsx     | 30 +++++++++++++++++++
 examples/dynamic-routing/package.json         | 11 +++++--
 examples/dynamic-routing/pages/about.js       | 10 -------
 examples/dynamic-routing/pages/about.tsx      | 10 +++++++
 examples/dynamic-routing/pages/index.js       | 10 -------
 examples/dynamic-routing/pages/index.tsx      | 10 +++++++
 .../post/[id]/{[comment].js => [comment].tsx} |  7 ++---
 .../pages/post/[id]/{index.js => index.tsx}   | 10 +++----
 examples/dynamic-routing/tsconfig.json        | 20 +++++++++++++
 10 files changed, 85 insertions(+), 63 deletions(-)
 delete mode 100644 examples/dynamic-routing/components/header.js
 create mode 100644 examples/dynamic-routing/components/header.tsx
 delete mode 100644 examples/dynamic-routing/pages/about.js
 create mode 100644 examples/dynamic-routing/pages/about.tsx
 delete mode 100644 examples/dynamic-routing/pages/index.js
 create mode 100644 examples/dynamic-routing/pages/index.tsx
 rename examples/dynamic-routing/pages/post/[id]/{[comment].js => [comment].tsx} (64%)
 rename examples/dynamic-routing/pages/post/[id]/{index.js => index.tsx} (63%)
 create mode 100644 examples/dynamic-routing/tsconfig.json

diff --git a/examples/dynamic-routing/components/header.js b/examples/dynamic-routing/components/header.js
deleted file mode 100644
index e7349ba94d1..00000000000
--- a/examples/dynamic-routing/components/header.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Link from 'next/link'
-
-const Header = () => (
-  <header>
-    <ul>
-      <li>
-        <Link href="/">
-          <a>Home</a>
-        </Link>
-      </li>
-      <li>
-        <Link href="/about">
-          <a>About</a>
-        </Link>
-      </li>
-      <li>
-        <Link href="/post/first">
-          <a>First Post</a>
-        </Link>
-      </li>
-      <li>
-        <Link href="/post/second">
-          <a>Second Post</a>
-        </Link>
-      </li>
-    </ul>
-  </header>
-)
-
-export default Header
diff --git a/examples/dynamic-routing/components/header.tsx b/examples/dynamic-routing/components/header.tsx
new file mode 100644
index 00000000000..e71ccc603b9
--- /dev/null
+++ b/examples/dynamic-routing/components/header.tsx
@@ -0,0 +1,30 @@
+import Link from 'next/link'
+
+export default function Header() {
+  return (
+    <header>
+      <ul>
+        <li>
+          <Link href="/">
+            <a>Home</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/about">
+            <a>About</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/post/first">
+            <a>First Post</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/post/second">
+            <a>Second Post</a>
+          </Link>
+        </li>
+      </ul>
+    </header>
+  )
+}
diff --git a/examples/dynamic-routing/package.json b/examples/dynamic-routing/package.json
index 349de02f4d8..6a0d14f6b52 100644
--- a/examples/dynamic-routing/package.json
+++ b/examples/dynamic-routing/package.json
@@ -6,8 +6,13 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "next": "12.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.9",
+    "@types/react": "18.0.17",
+    "typescript": "4.7.4"
   }
 }
diff --git a/examples/dynamic-routing/pages/about.js b/examples/dynamic-routing/pages/about.js
deleted file mode 100644
index 255d0764b44..00000000000
--- a/examples/dynamic-routing/pages/about.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Header from '../components/header'
-
-const About = () => (
-  <>
-    <Header />
-    <h1>About page</h1>
-  </>
-)
-
-export default About
diff --git a/examples/dynamic-routing/pages/about.tsx b/examples/dynamic-routing/pages/about.tsx
new file mode 100644
index 00000000000..d646cba7b62
--- /dev/null
+++ b/examples/dynamic-routing/pages/about.tsx
@@ -0,0 +1,10 @@
+import Header from '../components/header'
+
+export default function AboutPage() {
+  return (
+    <>
+      <Header />
+      <h1>About page</h1>
+    </>
+  )
+}
diff --git a/examples/dynamic-routing/pages/index.js b/examples/dynamic-routing/pages/index.js
deleted file mode 100644
index 0f56525ada2..00000000000
--- a/examples/dynamic-routing/pages/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Header from '../components/header'
-
-const Home = () => (
-  <>
-    <Header />
-    <h1>Hello World!</h1>
-  </>
-)
-
-export default Home
diff --git a/examples/dynamic-routing/pages/index.tsx b/examples/dynamic-routing/pages/index.tsx
new file mode 100644
index 00000000000..0280a6da7aa
--- /dev/null
+++ b/examples/dynamic-routing/pages/index.tsx
@@ -0,0 +1,10 @@
+import Header from '../components/header'
+
+export default function IndexPage() {
+  return (
+    <>
+      <Header />
+      <h1>Hello World!</h1>
+    </>
+  )
+}
diff --git a/examples/dynamic-routing/pages/post/[id]/[comment].js b/examples/dynamic-routing/pages/post/[id]/[comment].tsx
similarity index 64%
rename from examples/dynamic-routing/pages/post/[id]/[comment].js
rename to examples/dynamic-routing/pages/post/[id]/[comment].tsx
index 6aa93ef597d..1c33af5e0f2 100644
--- a/examples/dynamic-routing/pages/post/[id]/[comment].js
+++ b/examples/dynamic-routing/pages/post/[id]/[comment].tsx
@@ -1,9 +1,10 @@
 import { useRouter } from 'next/router'
 import Header from '../../../components/header'
 
-const Comment = () => {
+export default function CommentPage() {
   const router = useRouter()
-  const { id, comment } = router.query
+  const id = router.query.id as string
+  const comment = router.query.comment as string
 
   return (
     <>
@@ -13,5 +14,3 @@ const Comment = () => {
     </>
   )
 }
-
-export default Comment
diff --git a/examples/dynamic-routing/pages/post/[id]/index.js b/examples/dynamic-routing/pages/post/[id]/index.tsx
similarity index 63%
rename from examples/dynamic-routing/pages/post/[id]/index.js
rename to examples/dynamic-routing/pages/post/[id]/index.tsx
index c8f4a77ca38..ffad6732b96 100644
--- a/examples/dynamic-routing/pages/post/[id]/index.js
+++ b/examples/dynamic-routing/pages/post/[id]/index.tsx
@@ -2,9 +2,9 @@ import { useRouter } from 'next/router'
 import Link from 'next/link'
 import Header from '../../../components/header'
 
-const Post = () => {
+export default function PostPage() {
   const router = useRouter()
-  const { id } = router.query
+  const id = router.query.id as string
 
   return (
     <>
@@ -12,12 +12,12 @@ const Post = () => {
       <h1>Post: {id}</h1>
       <ul>
         <li>
-          <Link href="/post/[id]/[comment]" as={`/post/${id}/first-comment`}>
+          <Link href={`/post/${id}/first-comment`}>
             <a>First comment</a>
           </Link>
         </li>
         <li>
-          <Link href="/post/[id]/[comment]" as={`/post/${id}/second-comment`}>
+          <Link href={`/post/${id}/second-comment`}>
             <a>Second comment</a>
           </Link>
         </li>
@@ -25,5 +25,3 @@ const Post = () => {
     </>
   )
 }
-
-export default Post
diff --git a/examples/dynamic-routing/tsconfig.json b/examples/dynamic-routing/tsconfig.json
new file mode 100644
index 00000000000..50bcb22f653
--- /dev/null
+++ b/examples/dynamic-routing/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}