Merge branch 'canary' into build-deps/update-styled-jsx

.github/workflows/build_test_deploy.yml

@@ -181,7 +181,7 @@ jobs:
       - run: yarn install --check-files
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
-      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
+      - run: xvfb-run node run-tests.js test/integration/{fallback-modules,link-ref,production,basic,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
   testLegacyReact:

docs/api-reference/next.config.js/headers.md

@@ -227,6 +227,17 @@ module.exports = {
           },
         ],
       },
+      {
+        // this gets converted to /(en|fr|de)/(.*) so will not match the top-level
+        // `/` or `/fr` routes like /:path* would
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'worlld',
+          },
+        ],
+      },
     ]
   },
 }

docs/api-reference/next.config.js/redirects.md

@@ -152,9 +152,21 @@ module.exports = {
         locale: false,
         permanent: false,
       },
+      {
+        // this gets converted to /(en|fr|de)/(.*) so will not match the top-level
+        // `/` or `/fr` routes like /:path* would
+        source: '/(.*)',
+        destination: '/another',
+        permanent: false,
+      },
     ]
   },
 }
 ```
 
 In some rare cases, you might need to assign a custom status code for older HTTP Clients to properly redirect. In these cases, you can use the `statusCode` property instead of the `permanent` property, but not both. Note: to ensure IE11 compatibility a `Refresh` header is automatically added for the 308 status code.
+
+## Other Redirects
+
+- Inside [API Routes](/docs/api-routes/response-helpers.md), you can use `res.redirect()`.
+- Inside [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) and [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering), you can redirect specific pages at request-time.

docs/api-reference/next.config.js/rewrites.md

@@ -244,6 +244,12 @@ module.exports = {
         destination: '/en/another',
         locale: false,
       },
+      {
+        // this gets converted to /(en|fr|de)/(.*) so will not match the top-level
+        // `/` or `/fr` routes like /:path* would
+        source: '/(.*)',
+        destination: '/another',
+      },
     ]
   },
 }

docs/api-routes/dynamic-api-routes.md

@@ -17,10 +17,7 @@ For example, the API route `pages/api/post/[pid].js` has the following code:
 
 ```js
 export default function handler(req, res) {
-  const {
-    query: { pid },
-  } = req
-
+  const { pid } = req.query
   res.end(`Post: ${pid}`)
 }
 ```
@@ -69,10 +66,7 @@ An API route for `pages/api/post/[...slug].js` could look like this:
 
 ```js
 export default function handler(req, res) {
-  const {
-    query: { slug },
-  } = req
-
+  const { slug } = req.query
   res.end(`Post: ${slug.join(', ')}`)
 }
 ```

docs/api-routes/introduction.md

@@ -15,7 +15,7 @@ description: Next.js supports API Routes, which allow you to build your API with
   </ul>
 </details>
 
-API routes provide a straightforward solution to build your **API** with Next.js.
+API routes provide a solution to build your **API** with Next.js.
 
 Any file inside the folder `pages/api` is mapped to `/api/*` and will be treated as an API endpoint instead of a `page`. They are server-side only bundles and won't increase your client-side bundle size.
 
@@ -46,6 +46,13 @@ export default function handler(req, res) {
 
 To fetch API endpoints, take a look into any of the examples at the start of this section.
 
+## Use Cases
+
+For new projects, you can build your entire API with API Routes. If you have an existing API, you do not need to forward calls to the API through an API Route. Some other use cases for API Routes are:
+
+- Masking the URL of an external service (e.g. `/api/secret` instead of `https://company.com/secret-url`)
+- Using [Environment Variables](/docs/basic-features/environment-variables.md) on the server to securely access external services.
+
 ## Caveats
 
 - API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with the [cors middleware](/docs/api-routes/api-middlewares.md#connectexpress-middleware-support).

docs/api-routes/response-helpers.md

@@ -26,3 +26,5 @@ The included helpers are:
 - `res.json(json)` - Sends a JSON response. `json` must be a valid JSON object
 - `res.send(body)` - Sends the HTTP response. `body` can be a `string`, an `object` or a `Buffer`
 - `res.redirect([status,] path)` - Redirects to a specified path or URL. `status` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). If not specified, `status` defaults to "307" "Temporary redirect".
+
+To view an example using types, check out the [TypeScript documentation](/docs/basic-features/typescript.md#api-routes).

docs/authentication.md

@@ -68,7 +68,6 @@ Let's transform the profile example to use [server-side rendering](/docs/basic-f
 // pages/profile.js
 
 import withSession from '../lib/session'
-import useUser from '../lib/useUser'
 import Layout from '../components/Layout'
 
 export const getServerSideProps = withSession(async function ({ req, res }) {
@@ -189,6 +188,18 @@ You can either use [FirebaseUI](https://github.com/firebase/firebaseui-web-react
 
 [Userbase](https://userbase.com/) supports the static generation pattern for authentication. It's open source and allows for a high level of security with end-to-end encryption. You can learn more about it in their [official site](https://userbase.com/).
 
+### SuperTokens
+
+<details open>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-supertokens">with-supertokens</a></li>
+  </ul>
+</details>
+
+[SuperTokens](https://supertokens.io) is a highly customizable, open-source solution split into modules (so you only use what you need).
+SuperTokens currently supports credentials login, email verification, password reset flows, and third-party logins.
+
 ## Related
 
 For more information on what to do next, we recommend the following sections:

docs/deployment.md

@@ -78,6 +78,59 @@ Make sure your `package.json` has the `"build"` and `"start"` scripts:
 
 `next build` builds the production application in the `.next` folder. After building, `next start` starts a Node.js server that supports [hybrid pages](/docs/basic-features/pages.md), serving both statically generated and server-side rendered pages.
 
+### Docker Image
+
+Next.js can be deployed to any hosting provider that supports [Docker](https://www.docker.com/) containers. You can use this approach when deploying to container orchestrators such as [Kubernetes](https://kubernetes.io/) or [HashiCorp Nomad](https://www.nomadproject.io/), or when running inside a single node in any cloud provider.
+
+Here is a multi-stage `Dockerfile` using `node:alpine` that you can use:
+
+```Dockerfile
+# Install dependencies only when needed
+FROM node:alpine AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM node:alpine AS builder
+WORKDIR /app
+COPY . .
+COPY --from=deps /app/node_modules ./node_modules
+RUN yarn build
+
+# Production image, copy all the files and run next
+FROM node:alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+# COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+RUN chown -R nextjs:nodejs /app/.next
+USER nextjs
+
+EXPOSE 3000
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry.
+# RUN npx next telemetry disable
+
+CMD ["node_modules/.bin/next", "start"]
+```
+
+Make sure to place this Dockerfile in the root folder of your project.
+
+You can build your container with `docker build . -t my-next-js-app` and run it with `docker run -p 3000:3000 my-next-js-app`.
+
 ### Static HTML Export
 
 If you’d like to do a static HTML export of your Next.js app, follow the directions on [our documentation](/docs/advanced-features/static-html-export.md).

examples/custom-server-actionhero/config/servers/web.js

@@ -9,7 +9,7 @@ exports['default'] = {
         secure: false,
         // Passed to https.createServer if secure=true. Should contain SSL certificates
         serverOptions: {},
-        // Should we redirect all traffic to the first host in this array if hte request header doesn't match?
+        // Should we redirect all traffic to the first host in this array if the request header doesn't match?
         // i.e.: [ 'https://www.site.com' ]
         allowedRequestHosts: process.env.ALLOWED_HOSTS
           ? process.env.ALLOWED_HOSTS.split(',')

examples/with-mysql/.env.local.example

@@ -4,3 +4,4 @@ MYSQL_HOST=
 MYSQL_DATABASE= 
 MYSQL_USERNAME=
 MYSQL_PASSWORD=
+MYSQL_PORT=

examples/with-mysql/lib/db.ts

@@ -6,6 +6,7 @@ export const db = mysql({
     database: process.env.MYSQL_DATABASE,
     user: process.env.MYSQL_USERNAME,
     password: process.env.MYSQL_PASSWORD,
+    port: process.env.MYSQL_PORT,
   },
 })
 

examples/with-mysql/scripts/migrate-db.js

@@ -13,6 +13,7 @@ const db = mysql({
     database: process.env.MYSQL_DATABASE,
     user: process.env.MYSQL_USERNAME,
     password: process.env.MYSQL_PASSWORD,
+    port: process.env.MYSQL_PORT,
   },
 })
 

examples/with-nhost-auth-realtime-graphql/.env.local.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_GRAPHQL_URL=https://hasura-[project-id].nhost.app/v1/graphql
+NEXT_PUBLIC_BACKEND_URL=https://backend-[project-id].nhost.app

examples/with-nhost-auth-realtime-graphql/.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/with-nhost-auth-realtime-graphql/README.md

@@ -0,0 +1,61 @@
+# Auth & Realtime GraphQL Example Using Next.js and Nhost
+
+This example showcases Next.js as the frontend using [Nhost](https://nhost.io/) as the backend.
+
+## Demo
+
+### [https://nhost-nextjs-example.vercel.app/](https://nhost-nextjs-example.vercel.app/)
+
+## Deploy Your Own
+
+Once you have created a Nhost project and have access to [the environment variables you'll need](#step-4-add-environment-variables), 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/with-nhost-auth-realtime-graphql&project-name=with-nhost-auth-realtime-graphql&repository-name=with-nhost-auth-realtime-graphql&env=NEXT_PUBLIC_GRAPHQL_URL,NEXT_PUBLIC_BACKEND_URL&envDescription=Enter%20your%20Nhost%20project%27s%20URLs)
+
+## 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 nhost nhost-app
+# or
+yarn create next-app --example nhost nhost-app
+```
+
+## Configuration
+
+### Step 1. Create an account and a project on Nhost
+
+[Create an account and project on Nhost](https://console.nhost.io).
+
+### Step 2. Create `items` database
+
+Go to your project's Hasura console. Go to the **DATA** tab in the top menu and click **SQL** in the bottom left menu.
+
+Then copy the content from `setup/data.sql` in this example and paste it in the **Raw SQL** form in the Hasura Console. Make sure **Track this** is checked and click **Run!**
+
+### Step 3. Add API metadata
+
+Again, in the Hasura console, click on the **gearwheel** (settings) in the top right menu. Click on **Import metadata** and select the file `setup/hasura-metadata.json` in this repository.
+
+### Step 4. Add environment variables
+
+Copy `.env.local.example` to `.env.local` and update the two URLs with your Nhost project URLs. You find the URLs in the Nhost console dashboard of your project.
+
+### Step 5. Run Next.js in development mode
+
+```bash
+npm install
+npm run dev
+
+# or
+
+yarn install
+yarn dev
+```
+
+Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
+
+### Step 6. Deploy on Vercel
+
+You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-nhost-auth-realtime-graphql/components/private-route.js

@@ -0,0 +1,22 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useRouter } from 'next/router'
+import { useAuth } from '@nhost/react-auth'
+
+export function PrivateRoute(Component) {
+  return (props) => {
+    const router = useRouter()
+    const { signedIn } = useAuth()
+
+    // wait to see if the user is logged in or not.
+    if (signedIn === null) {
+      return <div>Checking auth...</div>
+    }
+
+    if (!signedIn) {
+      router.push('/login')
+      return <div>Redirecting...</div>
+    }
+
+    return <Component {...props} />
+  }
+}

examples/with-nhost-auth-realtime-graphql/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "with-nhost-auth-realtime-graphql",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@apollo/client": "3.3.11",
+    "@nhost/react-apollo": "1.0.7",
+    "@nhost/react-auth": "1.0.5",
+    "graphql": "15.5.0",
+    "next": "10.0.7",
+    "nhost-js-sdk": "3.0.0-16",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  }
+}

examples/with-nhost-auth-realtime-graphql/pages/_app.js

@@ -0,0 +1,19 @@
+import { NhostAuthProvider } from '@nhost/react-auth'
+import { NhostApolloProvider } from '@nhost/react-apollo'
+
+import { nhost } from '../utils/nhost'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <NhostAuthProvider auth={nhost.auth}>
+      <NhostApolloProvider
+        auth={nhost.auth}
+        gqlEndpoint={process.env.NEXT_PUBLIC_GRAPHQL_URL}
+      >
+        <Component {...pageProps} />
+      </NhostApolloProvider>
+    </NhostAuthProvider>
+  )
+}
+
+export default MyApp