[Docs] Update next-forms example (#40284)

## Changelog see commits ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
vercel · Sep 7, 2022 · abbe3b0 · abbe3b0
1 parent b8d9132
commit abbe3b0
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/examples/next-forms/pages/_app.tsx 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 <Component {...pageProps} />
+}
diff --git a/examples/next-forms/pages/api/form.js → examples/next-forms/pages/api/form.ts b/examples/next-forms/pages/api/form.js → 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<ResponseData>
+) {
   const body = req.body
   console.log('body: ', body)
 

diff --git a/examples/next-forms/pages/index.js → examples/next-forms/pages/index.tsx b/examples/next-forms/pages/index.js → 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 (
     <div className={styles.container}>
       <Head>

diff --git a/examples/next-forms/pages/js-form.js → examples/next-forms/pages/js-form.tsx b/examples/next-forms/pages/js-form.js → 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() {
         <input type="text" id="first" name="first" required />
         <label htmlFor="last">Last Name</label>
         <input type="text" id="last" name="last" required />
-
         <button type="submit">Submit</button>
       </form>
     </div>

diff --git a/examples/next-forms/pages/no-js-form.js → examples/next-forms/pages/no-js-form.tsx b/examples/next-forms/pages/no-js-form.js → examples/next-forms/pages/no-js-form.tsx
@@ -16,16 +16,18 @@ export default function Form() {
         <code className={styles.code}>pages/no-js-form.js</code>
       </p>
 
-      {/*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)
+       */}
       <form action="/api/form" method="post">
         <label htmlFor="first">First Name</label>
         <input type="text" id="first" name="first" required />
-
         <label htmlFor="last">Last Name</label>
         <input type="text" id="last" name="last" required />
-
         <button type="submit">Submit</button>
       </form>
     </div>

diff --git a/examples/next-forms/tsconfig.json 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"]
+}