diff --git a/examples/with-vercel-fetch/fetch/browser.js b/examples/with-vercel-fetch/fetch/browser.js
deleted file mode 100644
index 808452912c7b..000000000000
--- a/examples/with-vercel-fetch/fetch/browser.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import fetch from 'unfetch'
-
-export default fetch
diff --git a/examples/with-vercel-fetch/fetch/package.json b/examples/with-vercel-fetch/fetch/package.json
deleted file mode 100644
index de614c249ba9..000000000000
--- a/examples/with-vercel-fetch/fetch/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "browser": "./browser.js",
-  "main": "./server.js"
-}
diff --git a/examples/with-vercel-fetch/fetch/server.js b/examples/with-vercel-fetch/fetch/server.js
deleted file mode 100644
index fbeb2051e3e7..000000000000
--- a/examples/with-vercel-fetch/fetch/server.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import createFetch from '@vercel/fetch'
-
-// since we aren't providing createFetch a fetcher it will use node-fetch as the fetcher
-export default createFetch()
diff --git a/examples/with-vercel-fetch/github.d.ts b/examples/with-vercel-fetch/github.d.ts
new file mode 100644
index 000000000000..1d373d98bc27
--- /dev/null
+++ b/examples/with-vercel-fetch/github.d.ts
@@ -0,0 +1,10 @@
+// For simplicity we are creating our own types here.
+// If you want the full types check out:
+// https://github.com/octokit/openapi-types.ts
+export type Repository = {
+  id: number
+  name: string
+  full_name: string
+  stargazers_count: number
+  private: boolean
+} & Record<string, unknown>
diff --git a/examples/with-vercel-fetch/package.json b/examples/with-vercel-fetch/package.json
index 4bd011eebde9..90def9ce60fa 100644
--- a/examples/with-vercel-fetch/package.json
+++ b/examples/with-vercel-fetch/package.json
@@ -6,11 +6,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "@vercel/fetch": "6.1.0",
+    "@vercel/fetch": "^6.2.0",
     "next": "latest",
-    "node-fetch": "2.6.7",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "unfetch": "4.2.0"
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
   }
 }
diff --git a/examples/with-vercel-fetch/pages/index.js b/examples/with-vercel-fetch/pages/index.js
deleted file mode 100644
index 7b1a7bdd9bfc..000000000000
--- a/examples/with-vercel-fetch/pages/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Link from 'next/link'
-import fetch from '../fetch'
-
-export default function Index({ stars }) {
-  return (
-    <div>
-      <p>Next.js has {stars} ⭐️</p>
-      <Link href="/preact">How about preact?</Link>
-    </div>
-  )
-}
-
-export async function getStaticProps() {
-  const res = await fetch('https://api.github.com/repos/vercel/next.js')
-  const json = await res.json() // better use it inside try .. catch
-  return {
-    props: { stars: json.stargazers_count },
-  }
-}
diff --git a/examples/with-vercel-fetch/pages/index.tsx b/examples/with-vercel-fetch/pages/index.tsx
new file mode 100644
index 000000000000..19befd221f38
--- /dev/null
+++ b/examples/with-vercel-fetch/pages/index.tsx
@@ -0,0 +1,21 @@
+import type { InferGetStaticPropsType } from 'next'
+import type { Repository } from '../github'
+import createFetch from '@vercel/fetch'
+
+export async function getStaticProps() {
+  const fetch = createFetch()
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = (await res.json()) as Repository
+
+  return { props: { stars: repo.stargazers_count } }
+}
+
+export default function HomePage({
+  stars,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <div>
+      <p>Next.js has {stars} ⭐️</p>
+    </div>
+  )
+}
diff --git a/examples/with-vercel-fetch/pages/preact.js b/examples/with-vercel-fetch/pages/preact.js
deleted file mode 100644
index 67b714478eb1..000000000000
--- a/examples/with-vercel-fetch/pages/preact.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Link from 'next/link'
-import fetch from '../fetch'
-
-export default function Preact({ stars }) {
-  return (
-    <div>
-      <p>Preact has {stars} ⭐</p>
-      <Link href="/">I bet Next.js has more stars (?)</Link>
-    </div>
-  )
-}
-
-export async function getStaticProps() {
-  const res = await fetch('https://api.github.com/repos/preactjs/preact')
-  const json = await res.json() // better use it inside try .. catch
-  return {
-    props: { stars: json.stargazers_count },
-  }
-}
diff --git a/examples/with-vercel-fetch/tsconfig.json b/examples/with-vercel-fetch/tsconfig.json
new file mode 100644
index 000000000000..a739cb1e0dce
--- /dev/null
+++ b/examples/with-vercel-fetch/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "github.d.ts"],
+  "exclude": ["node_modules"]
+}