diff --git a/examples/dynamic-routing/components/header.js b/examples/dynamic-routing/components/header.js
deleted file mode 100644
index e7349ba94d11..000000000000
--- a/examples/dynamic-routing/components/header.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Link from 'next/link'
-
-const 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 000000000000..e71ccc603b93
--- /dev/null
+++ b/examples/dynamic-routing/components/header.tsx
@@ -0,0 +1,30 @@
+import Link from 'next/link'
+
+export default function Header() {
+ return (
+
+ )
+}
diff --git a/examples/dynamic-routing/package.json b/examples/dynamic-routing/package.json
index 349de02f4d84..6a0d14f6b52d 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 255d0764b446..000000000000
--- a/examples/dynamic-routing/pages/about.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Header from '../components/header'
-
-const About = () => (
- <>
-
-
About page
- >
-)
-
-export default About
diff --git a/examples/dynamic-routing/pages/about.tsx b/examples/dynamic-routing/pages/about.tsx
new file mode 100644
index 000000000000..d646cba7b626
--- /dev/null
+++ b/examples/dynamic-routing/pages/about.tsx
@@ -0,0 +1,10 @@
+import Header from '../components/header'
+
+export default function AboutPage() {
+ return (
+ <>
+
+ About page
+ >
+ )
+}
diff --git a/examples/dynamic-routing/pages/index.js b/examples/dynamic-routing/pages/index.js
deleted file mode 100644
index 0f56525ada21..000000000000
--- a/examples/dynamic-routing/pages/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Header from '../components/header'
-
-const Home = () => (
- <>
-
- Hello World!
- >
-)
-
-export default Home
diff --git a/examples/dynamic-routing/pages/index.tsx b/examples/dynamic-routing/pages/index.tsx
new file mode 100644
index 000000000000..0280a6da7aa3
--- /dev/null
+++ b/examples/dynamic-routing/pages/index.tsx
@@ -0,0 +1,10 @@
+import Header from '../components/header'
+
+export default function IndexPage() {
+ return (
+ <>
+
+ Hello World!
+ >
+ )
+}
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 6aa93ef597d2..1c33af5e0f24 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 c8f4a77ca386..ffad6732b960 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 = () => {
Post: {id}
-
-
+
First comment
-
-
+
Second comment
@@ -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 000000000000..50bcb22f653d
--- /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"]
+}