From 60abcf8dac0deea011c4a52b6c4d87282abdcca3 Mon Sep 17 00:00:00 2001
From: Henrik Wenz
Date: Tue, 6 Sep 2022 19:39:12 +0200
Subject: [PATCH 1/4] Update React
---
examples/next-forms/package.json | 11 +++++++----
1 file changed, 7 insertions(+), 4 deletions(-)
diff --git a/examples/next-forms/package.json b/examples/next-forms/package.json
index 9c52e1770b0f..ab144d52a269 100644
--- a/examples/next-forms/package.json
+++ b/examples/next-forms/package.json
@@ -8,11 +8,14 @@
},
"dependencies": {
"next": "latest",
- "react": "17.0.2",
- "react-dom": "17.0.2"
+ "react": "18.2.0",
+ "react-dom": "18.2.0"
},
"devDependencies": {
- "eslint": "8.4.1",
- "eslint-config-next": "latest"
+ "@types/node": "18.7.15",
+ "@types/react": "18.0.18",
+ "eslint": "8.23.0",
+ "eslint-config-next": "12.2.5",
+ "typescript": "4.8.2"
}
}
From 11b125878abe785ad053b4b0a2a16d5a6c251a42 Mon Sep 17 00:00:00 2001
From: Henrik Wenz
Date: Tue, 6 Sep 2022 20:09:19 +0200
Subject: [PATCH 2/4] Make .eslinrc a root
We need to do this to avoid a conflict error that is caused by the .eslint file in the root directory of this project.
---
examples/next-forms/.eslintrc.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/examples/next-forms/.eslintrc.json b/examples/next-forms/.eslintrc.json
index bffb357a7122..a2569c2c7ca0 100644
--- a/examples/next-forms/.eslintrc.json
+++ b/examples/next-forms/.eslintrc.json
@@ -1,3 +1,4 @@
{
+ "root": true,
"extends": "next/core-web-vitals"
}
From bc4b431d6c8d5395186c43a34892eec6fe093512 Mon Sep 17 00:00:00 2001
From: Henrik Wenz
Date: Tue, 6 Sep 2022 20:16:27 +0200
Subject: [PATCH 3/4] Use the same version for eslint-config-next then next
---
examples/next-forms/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/examples/next-forms/package.json b/examples/next-forms/package.json
index ab144d52a269..f438585da981 100644
--- a/examples/next-forms/package.json
+++ b/examples/next-forms/package.json
@@ -15,7 +15,7 @@
"@types/node": "18.7.15",
"@types/react": "18.0.18",
"eslint": "8.23.0",
- "eslint-config-next": "12.2.5",
+ "eslint-config-next": "latest",
"typescript": "4.8.2"
}
}
From 92ded667ed9ce473b68b9c69a9f4ea8a7c87c99f Mon Sep 17 00:00:00 2001
From: Henrik Wenz
Date: Tue, 6 Sep 2022 20:16:50 +0200
Subject: [PATCH 4/4] Migrate to typescript
---
examples/next-forms/next.config.js | 1 +
examples/next-forms/pages/_app.js | 7 -------
examples/next-forms/pages/_app.tsx | 6 ++++++
.../next-forms/pages/api/{form.js => form.ts} | 11 +++++++++-
.../next-forms/pages/{index.js => index.tsx} | 2 +-
.../pages/{js-form.js => js-form.tsx} | 16 +++++++--------
.../pages/{no-js-form.js => no-js-form.tsx} | 12 ++++++-----
examples/next-forms/tsconfig.json | 20 +++++++++++++++++++
8 files changed, 53 insertions(+), 22 deletions(-)
delete mode 100644 examples/next-forms/pages/_app.js
create mode 100644 examples/next-forms/pages/_app.tsx
rename examples/next-forms/pages/api/{form.js => form.ts} (57%)
rename examples/next-forms/pages/{index.js => index.tsx} (97%)
rename examples/next-forms/pages/{js-form.js => js-form.tsx} (84%)
rename examples/next-forms/pages/{no-js-form.js => no-js-form.tsx} (68%)
create mode 100644 examples/next-forms/tsconfig.json
diff --git a/examples/next-forms/next.config.js b/examples/next-forms/next.config.js
index 0d6071006ab3..8b61df4e50f8 100644
--- a/examples/next-forms/next.config.js
+++ b/examples/next-forms/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
}
diff --git a/examples/next-forms/pages/_app.js b/examples/next-forms/pages/_app.js
deleted file mode 100644
index 1e1cec92425c..000000000000
--- a/examples/next-forms/pages/_app.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import '../styles/globals.css'
-
-function MyApp({ Component, pageProps }) {
- return
-}
-
-export default MyApp
diff --git a/examples/next-forms/pages/_app.tsx b/examples/next-forms/pages/_app.tsx
new file mode 100644
index 000000000000..edfaad68a780
--- /dev/null
+++ b/examples/next-forms/pages/_app.tsx
@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import '../styles/globals.css'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+ return
+}
diff --git a/examples/next-forms/pages/api/form.js b/examples/next-forms/pages/api/form.ts
similarity index 57%
rename from examples/next-forms/pages/api/form.js
rename to examples/next-forms/pages/api/form.ts
index d3afc3681299..23aa4fdc140b 100644
--- a/examples/next-forms/pages/api/form.js
+++ b/examples/next-forms/pages/api/form.ts
@@ -1,4 +1,13 @@
-export default function handler(req, res) {
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+ data: string
+}
+
+export default function handler(
+ req: NextApiRequest,
+ res: NextApiResponse
+) {
const body = req.body
console.log('body: ', body)
diff --git a/examples/next-forms/pages/index.js b/examples/next-forms/pages/index.tsx
similarity index 97%
rename from examples/next-forms/pages/index.js
rename to examples/next-forms/pages/index.tsx
index 485abd8cd364..ea2f16b64a29 100644
--- a/examples/next-forms/pages/index.js
+++ b/examples/next-forms/pages/index.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image'
import Link from 'next/link'
import styles from '../styles/Home.module.css'
-export default function Home() {
+export default function IndexPage() {
return (
diff --git a/examples/next-forms/pages/js-form.js b/examples/next-forms/pages/js-form.tsx
similarity index 84%
rename from examples/next-forms/pages/js-form.js
rename to examples/next-forms/pages/js-form.tsx
index c77ee4c9520f..2fc2c7976824 100644
--- a/examples/next-forms/pages/js-form.js
+++ b/examples/next-forms/pages/js-form.tsx
@@ -1,25 +1,26 @@
import Link from 'next/link'
+import { FormEvent } from 'react'
import styles from '../styles/Home.module.css'
export default function PageWithJSbasedForm() {
// Handle the submit event on form submit.
- const handleSubmit = async (event) => {
+ const handleSubmit = async (event: FormEvent) => {
// Stop the form from submitting and refreshing the page.
event.preventDefault()
+ // Cast the event target to an html form
+ const form = event.target as HTMLFormElement
+
// Get data from the form.
const data = {
- first: event.target.first.value,
- last: event.target.last.value,
+ first: form.first.value as string,
+ last: form.last.value as string,
}
- const JSONdata = JSON.stringify(data)
-
// Send the form data to our API and get a response.
const response = await fetch('/api/form', {
// Body of the request is the JSON data we created above.
- body: JSONdata,
-
+ body: JSON.stringify(data),
// Tell the server we're sending JSON.
headers: {
'Content-Type': 'application/json',
@@ -53,7 +54,6 @@ export default function PageWithJSbasedForm() {
-
diff --git a/examples/next-forms/pages/no-js-form.js b/examples/next-forms/pages/no-js-form.tsx
similarity index 68%
rename from examples/next-forms/pages/no-js-form.js
rename to examples/next-forms/pages/no-js-form.tsx
index 17288c115222..0c1952f9c7bb 100644
--- a/examples/next-forms/pages/no-js-form.js
+++ b/examples/next-forms/pages/no-js-form.tsx
@@ -16,16 +16,18 @@ export default function Form() {
pages/no-js-form.js
- {/*action: The action attribute defines where the data gets sent. Its value must be a valid relative or absolute URL. If this attribute isn't provided, the data will be sent to the URL of the page containing the form — the current page.
- method: The HTTP method to submit the form with. (case insensitive) s*/}
-
+ {/*
+ * action: The action attribute defines where the data gets sent.
+ * Its value must be a valid relative or absolute URL.
+ * If this attribute isn't provided, the data will be sent to the URL
+ * of the page containing the form — the current page.
+ * method: The HTTP method to submit the form with. (case insensitive)
+ */}
diff --git a/examples/next-forms/tsconfig.json b/examples/next-forms/tsconfig.json
new file mode 100644
index 000000000000..99710e857874
--- /dev/null
+++ b/examples/next-forms/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"],
+ "exclude": ["node_modules"]
+}