merge canary

SECURITY.md

@@ -1 +1,9 @@
-Visit https://vercel.com/security to view the disclosure policy.
+# Reporting Security Issues
+
+If you believe you have found a security vulnerability in Next.js, we encourage you to let us know right away.
+
+We will investigate all legitimate reports and do our best to quickly fix the problem.
+
+Email `security@vercel.com` to disclose any security vulnerabilities.
+
+https://vercel.com/security

docs/advanced-features/security-headers.md

@@ -18,7 +18,7 @@ module.exports = {
     return [
       {
         // Apply these headers to all routes in your application.
-        source: '/(.*)',
+        source: '/:path*',
         headers: securityHeaders,
       },
     ]

docs/authentication.md

@@ -71,7 +71,9 @@ import withSession from '../lib/session'
 import Layout from '../components/Layout'
 
 export const getServerSideProps = withSession(async function ({ req, res }) {
-  if (!req.session.user) {
+  const { user } = req.session
+
+  if (!user) {
     return {
       redirect: {
         destination: '/login',

docs/basic-features/data-fetching/client-side.md

@@ -43,7 +43,7 @@ function Profile() {
 
 ## Client-side data fetching with SWR
 
-The team behind Next.js has created a React hook library for data fetching called [**SWR**](https://swr.vercel.app/). It is **highly recommend** if you are fetching data on the client-side. It handles caching, revalidation, focus tracking, refetching on intervals, and more.
+The team behind Next.js has created a React hook library for data fetching called [**SWR**](https://swr.vercel.app/). It is **highly recommended** if you are fetching data on the client-side. It handles caching, revalidation, focus tracking, refetching on intervals, and more.
 
 Using the same example as above, we can now use SWR to fetch the profile data. SWR will automatically cache the data for us and will revalidate the data if it becomes stale.
 

errors/prerender-error.md

@@ -10,5 +10,5 @@ While prerendering a page an error occurred. This can occur for many reasons fro
 - Check for any code that assumes a prop is available, even when it might not be
 - Set default values for all dynamic pages' props (avoid `undefined`, use `null` instead so it can be serialized)
 - Check for any out of date modules that you might be relying on
-- Make sure your component handles `fallback` if it is enabled in `getStaticPaths`. [Fallback docs](https://nextjs.org/docs/basic-features/data-fetching#the-fallback-key-required)
+- Make sure your component handles `fallback` if it is enabled in `getStaticPaths`. [Fallback docs](https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-false)
 - Make sure you are not trying to export (`next export`) pages that have server-side rendering enabled [(getServerSideProps)](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering)

examples/next-forms/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/next-forms/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/next-forms/README.md

@@ -0,0 +1,27 @@
+# Building Web Forms with Next.js Example
+
+This example shows how you can build forms with Next.js.
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/next-forms)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![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)
+
+## How to use
+
+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:
+
+```bash
+npx create-next-app --example next-forms next-forms-app
+# or
+yarn create next-app --example next-forms next-forms-app
+```
+
+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

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

examples/next-forms/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "eslint": "8.4.1",
+    "eslint-config-next": "latest"
+  }
+}

examples/next-forms/pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

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

@@ -0,0 +1,12 @@
+export default function handler(req, res) {
+  const body = req.body
+  console.log('body: ', body)
+
+  // Both of these are required.
+  if (!body.first || !body.last) {
+    return res.json({ data: 'First or last name not found' })
+  }
+
+  // Found the name.
+  res.json({ data: `${body.first} ${body.last}` })
+}

examples/next-forms/pages/index.js

@@ -0,0 +1,53 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import Link from 'next/link'
+import styles from '../styles/Home.module.css'
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Next.js forms</title>
+        <meta name="description" content="Learn forms with Next.js" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Forms with <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+
+        <p className={styles.description}>
+          Get started by looking at{' '}
+          <code className={styles.code}>pages/js-form.js</code> and{' '}
+          <code className={styles.code}>pages/no-js-form.js</code>
+        </p>
+
+        <div className={styles.grid}>
+          <Link href="/js-form">
+            <a className={styles.card}>
+              <h2>Form with JavaScript &rarr;</h2>
+              <p>Learn to handle forms with JavaScript in Next.js.</p>
+            </a>
+          </Link>
+
+          <Link href="/no-js-form">
+            <a className={styles.card}>
+              <h2>Form without JavaScript &rarr;</h2>
+              <p>Learn to handle forms without JavaScript in Next.js.</p>
+            </a>
+          </Link>
+        </div>
+      </main>
+
+      <footer className={styles.footer}>
+        <a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">
+          Built with Next.js | Powered by{' '}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
+  )
+}

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 (
+    <div className="container">
+      <h1 className={styles.title}>
+        Form{' '}
+        <Link href="/">
+          <a>with</a>
+        </Link>{' '}
+        JavaScript.
+      </h1>
+
+      <p className={styles.description}>
+        Get started by looking at{' '}
+        <code className={styles.code}>pages/js-from.js</code>
+      </p>
+
+      <form onSubmit={handleSubmit}>
+        <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>
+  )
+}

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

@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import styles from '../styles/Home.module.css'
+
+export default function Form() {
+  return (
+    <div className="container">
+      <h1 className={styles.title}>
+        Form{' '}
+        <Link href="/">
+          <a>without</a>
+        </Link>{' '}
+        JavaScript.
+      </h1>
+      <p className={styles.description}>
+        Get started by looking at{' '}
+        <code className={styles.code}>pages/no-js-from.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*/}
+
+      <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>
+  )
+}