[Docs] Migrate data-fetch example to typescript (#39852)

## Changelog

- Updated deps
- Migrated to Typescript
- Replaced `div` with `Fragment`

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

examples/data-fetch/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.11",
+    "@types/react": "18.0.17",
+    "typescript": "4.7.4"
   }
 }

examples/data-fetch/pages/index.js → examples/data-fetch/pages/index.tsx

@@ -1,25 +1,26 @@
 import Link from 'next/link'
-
-function Index({ stars }) {
-  return (
-    <div>
-      <p>Next.js has {stars} ⭐️</p>
-      <Link href="/preact-stars">
-        <a>How about preact?</a>
-      </Link>
-    </div>
-  )
-}
+import type { InferGetStaticPropsType } from 'next'
+import type { Repository } from '../types/github'
 
 export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
-  const json = await res.json()
-
+  const data: Repository = await res.json()
   return {
     props: {
-      stars: json.stargazers_count,
+      stars: data.stargazers_count,
     },
   }
 }
 
-export default Index
+export default function IndexPage({
+  stars,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <>
+      <p>Next.js has {stars} ⭐️</p>
+      <Link href="/preact-stars">
+        <a>How about preact?</a>
+      </Link>
+    </>
+  )
+}

examples/data-fetch/pages/preact-stars.js → examples/data-fetch/pages/preact-stars.tsx

@@ -1,25 +1,26 @@
 import Link from 'next/link'
-
-function PreactStars({ stars }) {
-  return (
-    <div>
-      <p>Preact has {stars} ⭐</p>
-      <Link href="/">
-        <a>I bet Next.js has more stars (?)</a>
-      </Link>
-    </div>
-  )
-}
+import type { InferGetStaticPropsType } from 'next'
+import type { Repository } from '../types/github'
 
 export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/preactjs/preact')
-  const json = await res.json()
-
+  const json: Repository = await res.json()
   return {
     props: {
       stars: json.stargazers_count,
     },
   }
 }
 
-export default PreactStars
+export default function PreactStarsPage({
+  stars,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <>
+      <p>Preact has {stars} ⭐</p>
+      <Link href="/">
+        <a>I bet Next.js has more stars (?)</a>
+      </Link>
+    </>
+  )
+}

examples/data-fetch/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/data-fetch/types/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>