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