+ )
+}
diff --git a/examples/next-forms/pages/js-form.js b/examples/next-forms/pages/js-form.js
new file mode 100644
index 0000000000000..3dd90a9a59a08
--- /dev/null
+++ b/examples/next-forms/pages/js-form.js
@@ -0,0 +1,61 @@
+import Link from 'next/link'
+import styles from '../styles/Home.module.css'
+
+export default function PageWithJSbasedForm() {
+ // Handle the submit event on form submit.
+ const handleSubmit = async (event) => {
+ // Stop the form from submitting and refreshing the page.
+ event.preventDefault()
+
+ // Get data from the form.
+ const data = {
+ first: event.target.first.value,
+ last: event.target.last.value,
+ }
+
+ 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,
+
+ // Tell the server we're sending JSON.
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ // The method is POST because we are sending data.
+ method: 'POST',
+ })
+
+ // Get the response data from server as JSON.
+ // If server returns the name submitted, that means the form works.
+ const result = await response.json()
+ alert(`Is this your full name: ${result.data}`)
+ }
+ return (
+
+ Get started by looking at{' '}
+ pages/no-js-from.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*/}
+
+
+