Skip to content

Commit 9b1ac6e

Browse files
kodiakhq[bot]kodiakhq[bot]
authored
Merge branch 'canary' into bs/fetch
2 parents 74e17d5 + 25d064f commit 9b1ac6e

File tree

79 files changed

+3571
-131
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+3571
-131
lines changed

‎examples/next-forms/.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎examples/next-forms/.gitignore‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎examples/next-forms/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Building Web Forms with Next.js Example
2+
3+
This example shows how you can build forms with Next.js.
4+
5+
## Preview
6+
7+
Preview the example live on [StackBlitz](http://stackblitz.com/):
8+
9+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/next-forms)
10+
11+
## Deploy your own
12+
13+
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
14+
15+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/next-forms&project-name=next-forms&repository-name=next-forms)
16+
17+
## How to use
18+
19+
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
20+
21+
```bash
22+
npx create-next-app --example next-forms next-forms-app
23+
# or
24+
yarn create next-app --example next-forms next-forms-app
25+
```
26+
27+
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

‎examples/next-forms/next.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
reactStrictMode: true,
3+
}

‎examples/next-forms/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"dev": "next dev",
5+
"build": "next build",
6+
"start": "next start",
7+
"lint": "next lint"
8+
},
9+
"dependencies": {
10+
"next": "latest",
11+
"react": "17.0.2",
12+
"react-dom": "17.0.2"
13+
},
14+
"devDependencies": {
15+
"eslint": "8.4.1",
16+
"eslint-config-next": "latest"
17+
}
18+
}

‎examples/next-forms/pages/_app.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import '../styles/globals.css'
2+
3+
function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />
5+
}
6+
7+
export default MyApp

‎examples/next-forms/pages/api/form.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default function handler(req, res) {
2+
const body = req.body
3+
console.log('body: ', body)
4+
5+
// Both of these are required.
6+
if (!body.first || !body.last) {
7+
return res.json({ data: 'First or last name not found' })
8+
}
9+
10+
// Found the name.
11+
res.json({ data: `${body.first} ${body.last}` })
12+
}

‎examples/next-forms/pages/index.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import Head from 'next/head'
2+
import Image from 'next/image'
3+
import Link from 'next/link'
4+
import styles from '../styles/Home.module.css'
5+
6+
export default function Home() {
7+
return (
8+
<div className={styles.container}>
9+
<Head>
10+
<title>Next.js forms</title>
11+
<meta name="description" content="Learn forms with Next.js" />
12+
<link rel="icon" href="/favicon.ico" />
13+
</Head>
14+
15+
<main className={styles.main}>
16+
<h1 className={styles.title}>
17+
Forms with <a href="https://nextjs.org">Next.js!</a>
18+
</h1>
19+
20+
<p className={styles.description}>
21+
Get started by looking at{' '}
22+
<code className={styles.code}>pages/js-form.js</code> and{' '}
23+
<code className={styles.code}>pages/no-js-form.js</code>
24+
</p>
25+
26+
<div className={styles.grid}>
27+
<Link href="/js-form">
28+
<a className={styles.card}>
29+
<h2>Form with JavaScript &rarr;</h2>
30+
<p>Learn to handle forms with JavaScript in Next.js.</p>
31+
</a>
32+
</Link>
33+
34+
<Link href="/no-js-form">
35+
<a className={styles.card}>
36+
<h2>Form without JavaScript &rarr;</h2>
37+
<p>Learn to handle forms without JavaScript in Next.js.</p>
38+
</a>
39+
</Link>
40+
</div>
41+
</main>
42+
43+
<footer className={styles.footer}>
44+
<a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">
45+
Built with Next.js | Powered by{' '}
46+
<span className={styles.logo}>
47+
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
48+
</span>
49+
</a>
50+
</footer>
51+
</div>
52+
)
53+
}

‎examples/next-forms/pages/js-form.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import Link from 'next/link'
2+
import styles from '../styles/Home.module.css'
3+
4+
export default function PageWithJSbasedForm() {
5+
// Handle the submit event on form submit.
6+
const handleSubmit = async (event) => {
7+
// Stop the form from submitting and refreshing the page.
8+
event.preventDefault()
9+
10+
// Get data from the form.
11+
const data = {
12+
first: event.target.first.value,
13+
last: event.target.last.value,
14+
}
15+
16+
const JSONdata = JSON.stringify(data)
17+
18+
// Send the form data to our API and get a response.
19+
const response = await fetch('/api/form', {
20+
// Body of the request is the JSON data we created above.
21+
body: JSONdata,
22+
23+
// Tell the server we're sending JSON.
24+
headers: {
25+
'Content-Type': 'application/json',
26+
},
27+
// The method is POST because we are sending data.
28+
method: 'POST',
29+
})
30+
31+
// Get the response data from server as JSON.
32+
// If server returns the name submitted, that means the form works.
33+
const result = await response.json()
34+
alert(`Is this your full name: ${result.data}`)
35+
}
36+
return (
37+
<div className="container">
38+
<h1 className={styles.title}>
39+
Form{' '}
40+
<Link href="/">
41+
<a>with</a>
42+
</Link>{' '}
43+
JavaScript.
44+
</h1>
45+
46+
<p className={styles.description}>
47+
Get started by looking at{' '}
48+
<code className={styles.code}>pages/js-from.js</code>
49+
</p>
50+
51+
<form onSubmit={handleSubmit}>
52+
<label htmlFor="first">First Name</label>
53+
<input type="text" id="first" name="first" required />
54+
<label htmlFor="last">Last Name</label>
55+
<input type="text" id="last" name="last" required />
56+
57+
<button type="submit">Submit</button>
58+
</form>
59+
</div>
60+
)
61+
}

‎examples/next-forms/pages/no-js-form.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Link from 'next/link'
2+
import styles from '../styles/Home.module.css'
3+
4+
export default function Form() {
5+
return (
6+
<div className="container">
7+
<h1 className={styles.title}>
8+
Form{' '}
9+
<Link href="/">
10+
<a>without</a>
11+
</Link>{' '}
12+
JavaScript.
13+
</h1>
14+
<p className={styles.description}>
15+
Get started by looking at{' '}
16+
<code className={styles.code}>pages/no-js-from.js</code>
17+
</p>
18+
19+
{/*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.
20+
method: The HTTP method to submit the form with. (case insensitive) s*/}
21+
22+
<form action="/api/form" method="post">
23+
<label htmlFor="first">First Name</label>
24+
<input type="text" id="first" name="first" required />
25+
26+
<label htmlFor="last">Last Name</label>
27+
<input type="text" id="last" name="last" required />
28+
29+
<button type="submit">Submit</button>
30+
</form>
31+
</div>
32+
)
33+
}

0 commit comments

Comments
 (0)