[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)
This commit is contained in:
Henrik Wenz
GitHub
parent
b8d913295f
commit
abbe3b0ad4
10 changed files with 61 additions and 26 deletions
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"root": true,
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
import '../styles/globals.css'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
6
examples/next-forms/pages/_app.tsx
Normal file
6
examples/next-forms/pages/_app.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import type { AppProps } from 'next/app'
|
||||
import '../styles/globals.css'
|
||||
|
||||
export default function MyApp({ Component, pageProps }: AppProps) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
20
examples/next-forms/tsconfig.json
Normal file
20
examples/next-forms/tsconfig.json
Normal file
|
|
@ -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"]
|
||||
}
|
||||
Loading…
Reference in a new issue