diff --git a/examples/using-router/components/CustomLink.tsx b/examples/using-router/components/CustomLink.tsx
new file mode 100644
index 0000000000000..6964c15ab58ba
--- /dev/null
+++ b/examples/using-router/components/CustomLink.tsx
@@ -0,0 +1,47 @@
+import { useRouter } from 'next/router'
+import { useEffect, ReactNode, HTMLAttributes } from 'react'
+
+type CustomLinkProps = {
+  children: ReactNode
+  href: string
+  prefetch?: boolean
+  replace?: boolean
+  shallow?: boolean
+} & HTMLAttributes<HTMLAnchorElement>
+
+// typically you want to use `next/link` for this usecase
+// but this example shows how you can also access the router
+// and use it manually
+export default function CustomLink({
+  children,
+  href,
+  prefetch = false,
+  replace = false,
+  shallow = false,
+  ...props
+}: CustomLinkProps) {
+  const router = useRouter()
+
+  useEffect(() => {
+    if (prefetch) {
+      router.prefetch(href)
+    }
+  }, [router, href, prefetch])
+
+  return (
+    <a
+      {...props}
+      href={href}
+      onClick={(event) => {
+        event.preventDefault()
+        if (replace) {
+          router.replace(href, undefined, { shallow })
+        } else {
+          router.push(href, undefined, { shallow })
+        }
+      }}
+    >
+      {children}
+    </a>
+  )
+}
diff --git a/examples/using-router/components/Header.js b/examples/using-router/components/Header.js
deleted file mode 100644
index 22090caa181e8..0000000000000
--- a/examples/using-router/components/Header.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useRouter } from 'next/router'
-
-export default function Header() {
-  return (
-    <div>
-      <Link href="/">Home</Link>
-      <Link href="/about">About</Link>
-    </div>
-  )
-}
-
-const Link = ({ children, href }) => {
-  const router = useRouter()
-  return (
-    <a
-      href="#"
-      onClick={(e) => {
-        e.preventDefault()
-        // typically you want to use `next/link` for this usecase
-        // but this example shows how you can also access the router
-        // and use it manually
-        router.push(href)
-      }}
-    >
-      {children}
-      <style jsx>{`
-        a {
-          margin-right: 10px;
-        }
-      `}</style>
-    </a>
-  )
-}
diff --git a/examples/using-router/components/Header.tsx b/examples/using-router/components/Header.tsx
new file mode 100644
index 0000000000000..7525d7bb739b1
--- /dev/null
+++ b/examples/using-router/components/Header.tsx
@@ -0,0 +1,14 @@
+import CustomLink from './CustomLink'
+
+export default function Header() {
+  return (
+    <header>
+      <nav>
+        <CustomLink href="/">Home</CustomLink>{' '}
+        <CustomLink href="/about" prefetch>
+          About
+        </CustomLink>
+      </nav>
+    </header>
+  )
+}
diff --git a/examples/using-router/package.json b/examples/using-router/package.json
index 349de02f4d84b..bf29745bfe271 100644
--- a/examples/using-router/package.json
+++ b/examples/using-router/package.json
@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/examples/using-router/pages/about.js b/examples/using-router/pages/about.tsx
similarity index 67%
rename from examples/using-router/pages/about.js
rename to examples/using-router/pages/about.tsx
index 086dde4a32665..0f43605f1b198 100644
--- a/examples/using-router/pages/about.js
+++ b/examples/using-router/pages/about.tsx
@@ -1,10 +1,10 @@
 import Header from '../components/Header'
 
-export default function About() {
+export default function AboutPage() {
   return (
-    <div>
+    <>
       <Header />
       <p>This is the about page.</p>
-    </div>
+    </>
   )
 }
diff --git a/examples/using-router/pages/index.js b/examples/using-router/pages/index.tsx
similarity index 66%
rename from examples/using-router/pages/index.js
rename to examples/using-router/pages/index.tsx
index 36583518a84cd..a1ac37ffab93c 100644
--- a/examples/using-router/pages/index.js
+++ b/examples/using-router/pages/index.tsx
@@ -1,10 +1,10 @@
 import Header from '../components/Header'
 
-export default function Home() {
+export default function IndexPage() {
   return (
-    <div>
+    <>
       <Header />
       <p>HOME PAGE is here!</p>
-    </div>
+    </>
   )
 }
diff --git a/examples/using-router/tsconfig.json b/examples/using-router/tsconfig.json
new file mode 100644
index 0000000000000..50bcb22f653d7
--- /dev/null
+++ b/examples/using-router/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"]
+}