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"] +}