[docs] Migrate dynamic routing example to typescript (#39806)

Changelog

Migrated example to typescript
Remove obsolete Link->as prop
Normalize Module exports

Documentation / Examples

 Make sure the linting passes by running pnpm lint
 The examples guidelines are followed from our contributing doc

Co-authored-by: JJ Kasper <[email protected]>

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>
+  )
+}

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"
   }
 }

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>
+    </>
+  )
+}

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>
+    </>
+  )
+}

examples/dynamic-routing/pages/post/[id]/[comment].js → 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

examples/dynamic-routing/pages/post/[id]/index.js → examples/dynamic-routing/pages/post/[id]/index.tsx

@@ -2,28 +2,26 @@ 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 (
     <>
       <Header />
       <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>
       </ul>
     </>
   )
 }
-
-export default Post

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"]
+}