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" } 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/package.json b/examples/next-forms/package.json index 9c52e1770b0f..f438585da981 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": "latest", + "typescript": "4.8.2" } } 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"] +}