From 007d186b7843f5e47f1d5685093e38701c83519c Mon Sep 17 00:00:00 2001
From: Max Proske <max@mproske.com>
Date: Wed, 15 Jun 2022 04:33:35 -0700
Subject: [PATCH] Convert hello-world example to TypeScript (#37706)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TypeScript is being leveraged for new examples going forward, so I'm converting this example over. 😂

## 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/hello-world/README.md                |  2 +-
 examples/hello-world/next-env.d.ts            |  5 +++++
 examples/hello-world/package.json             | 10 ++++++++--
 .../hello-world/pages/{about.js => about.tsx} |  0
 .../pages/day/{index.js => index.tsx}         |  0
 .../hello-world/pages/{index.js => index.tsx} |  0
 examples/hello-world/tsconfig.json            | 20 +++++++++++++++++++
 7 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 examples/hello-world/next-env.d.ts
 rename examples/hello-world/pages/{about.js => about.tsx} (100%)
 rename examples/hello-world/pages/day/{index.js => index.tsx} (100%)
 rename examples/hello-world/pages/{index.js => index.tsx} (100%)
 create mode 100644 examples/hello-world/tsconfig.json

diff --git a/examples/hello-world/README.md b/examples/hello-world/README.md
index 238128474f324..43f519bdfa6c0 100644
--- a/examples/hello-world/README.md
+++ b/examples/hello-world/README.md
@@ -1,6 +1,6 @@
 # Hello World example
 
-This example shows the most basic idea behind Next. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities. The `day` directory shows that you can have subdirectories.
+This example shows the most basic idea behind Next. We have 2 pages: `pages/index.tsx` and `pages/about.tsx`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities. The `day` directory shows that you can have subdirectories.
 
 ## Deploy your own
 
diff --git a/examples/hello-world/next-env.d.ts b/examples/hello-world/next-env.d.ts
new file mode 100644
index 0000000000000..4f11a03dc6cc3
--- /dev/null
+++ b/examples/hello-world/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json
index 349de02f4d84b..1423be763e131 100644
--- a/examples/hello-world/package.json
+++ b/examples/hello-world/package.json
@@ -7,7 +7,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.43",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
+    "typescript": "^4.7.3"
   }
 }
diff --git a/examples/hello-world/pages/about.js b/examples/hello-world/pages/about.tsx
similarity index 100%
rename from examples/hello-world/pages/about.js
rename to examples/hello-world/pages/about.tsx
diff --git a/examples/hello-world/pages/day/index.js b/examples/hello-world/pages/day/index.tsx
similarity index 100%
rename from examples/hello-world/pages/day/index.js
rename to examples/hello-world/pages/day/index.tsx
diff --git a/examples/hello-world/pages/index.js b/examples/hello-world/pages/index.tsx
similarity index 100%
rename from examples/hello-world/pages/index.js
rename to examples/hello-world/pages/index.tsx
diff --git a/examples/hello-world/tsconfig.json b/examples/hello-world/tsconfig.json
new file mode 100644
index 0000000000000..b8d597880a1ae
--- /dev/null
+++ b/examples/hello-world/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "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",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}