From 16838d5dd46f3abad5fc1c61e4f8232d96a0f25c Mon Sep 17 00:00:00 2001
From: Henrik Wenz <HaNdTriX@users.noreply.github.com>
Date: Tue, 23 Aug 2022 16:23:38 +0200
Subject: [PATCH] [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              | 11 +++++--
 .../data-fetch/pages/{index.js => index.tsx}  | 31 ++++++++++---------
 .../{preact-stars.js => preact-stars.tsx}     | 29 ++++++++---------
 examples/data-fetch/tsconfig.json             | 19 ++++++++++++
 examples/data-fetch/types/github.d.ts         | 10 ++++++
 5 files changed, 68 insertions(+), 32 deletions(-)
 rename examples/data-fetch/pages/{index.js => index.tsx} (52%)
 rename examples/data-fetch/pages/{preact-stars.js => preact-stars.tsx} (57%)
 create mode 100644 examples/data-fetch/tsconfig.json
 create mode 100644 examples/data-fetch/types/github.d.ts

diff --git a/examples/data-fetch/package.json b/examples/data-fetch/package.json
index 349de02f4d84..6d7b78181046 100644
--- a/examples/data-fetch/package.json
+++ b/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"
   }
 }
diff --git a/examples/data-fetch/pages/index.js b/examples/data-fetch/pages/index.tsx
similarity index 52%
rename from examples/data-fetch/pages/index.js
rename to examples/data-fetch/pages/index.tsx
index d668c07e8fd6..a85b350fab30 100644
--- a/examples/data-fetch/pages/index.js
+++ b/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>
+    </>
+  )
+}
diff --git a/examples/data-fetch/pages/preact-stars.js b/examples/data-fetch/pages/preact-stars.tsx
similarity index 57%
rename from examples/data-fetch/pages/preact-stars.js
rename to examples/data-fetch/pages/preact-stars.tsx
index 9039129474ed..f7e7f70e3978 100644
--- a/examples/data-fetch/pages/preact-stars.js
+++ b/examples/data-fetch/pages/preact-stars.tsx
@@ -1,20 +1,10 @@
 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,
@@ -22,4 +12,15 @@ export async function getStaticProps() {
   }
 }
 
-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>
+    </>
+  )
+}
diff --git a/examples/data-fetch/tsconfig.json b/examples/data-fetch/tsconfig.json
new file mode 100644
index 000000000000..93a83a407c40
--- /dev/null
+++ b/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"]
+}
diff --git a/examples/data-fetch/types/github.d.ts b/examples/data-fetch/types/github.d.ts
new file mode 100644
index 000000000000..1d373d98bc27
--- /dev/null
+++ b/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>