Merge branch 'canary' into uploadcare-loader

vercel · Dec 14, 2020 · bb043e9 · bb043e9
2 parents 08d098a + a442841
commit bb043e9
Show file tree

Hide file tree

Showing 156 changed files with 2,751 additions and 794 deletions.
diff --git a/.github/workflows/cancel.yml b/.github/workflows/cancel.yml
@@ -0,0 +1,17 @@
+name: Cancel
+on:
+  pull_request_target:
+    types:
+      - edited
+      - synchronize
+
+jobs:
+  cancel:
+    name: 'Cancel Previous Runs'
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - uses: styfle/[email protected]
+        with:
+          workflow_id: 444921, 444987
+          access_token: ${{ github.token }}
diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md
@@ -71,6 +71,8 @@ export default Home
 
 `DynamicComponent` will be the default component returned by `../components/hello`. It works like a regular React Component, and you can pass props to it as you normally would.
 
+> **Note**: `import()` needs to be explicitly written without template strings. Furthermore the `import()` has to be inside the `dynamic()` call for Next.js to be able to match webpack bundles / module ids to the specific `dynamic()` call and preload them before rendering. `dynamic()` can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work, similar to `React.lazy`.
+
 ## With named exports
 
 If the dynamic component is not the default export, you can use a named export too. Consider the module `../components/hello.js` which has a named export `Hello`:

diff --git a/docs/advanced-features/i18n-routing.md b/docs/advanced-features/i18n-routing.md
@@ -214,6 +214,12 @@ export default function IndexPage(props) {
 }
 ```
 
+## Leveraging the NEXT_LOCALE cookie
+
+Next.js supports overriding the accept-language header with a `NEXT_LOCALE=the-locale` cookie. This cookie can be set using a language switcher and then when a user comes back to the site it will leverage the locale specified in the cookie.
+
+For example, if a user prefers the locale `fr` but a `NEXT_LOCALE=en` cookie is set the `en` locale will be used instead until the cookie is removed or expired.
+
 ## Search Engine Optimization
 
 Since Next.js knows what language the user is visiting it will automatically add the `lang` attribute to the `<html>` tag.
@@ -222,6 +228,8 @@ Next.js doesn't know about variants of a page so it's up to you to add the `href
 
 ## How does this work with Static Generation?
 
+> Note that Internationalized Routing does not integrate with [`next export`](/docs/advanced-features/static-html-export.md) as `next export` does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use `next export` are fully supported.
+
 ### Automatically Statically Optimized Pages
 
 For pages that are [automatically statically optimized](/docs/advanced-features/automatic-static-optimization.md), a version of the page will be generated for each locale.
@@ -269,7 +277,3 @@ export const getStaticPaths = ({ locales }) => {
   }
 }
 ```
-
-## Caveats
-
-Internationalized Routing does not currently support [Static HTML Export (`next export`)](/docs/advanced-features/static-html-export.md) as you are no longer leveraging Next.js' server-side routing in that case.
diff --git a/docs/api-reference/next.config.js/headers.md b/docs/api-reference/next.config.js/headers.md
@@ -178,7 +178,7 @@ module.exports = {
 
 ### Headers with i18n support
 
-When leveraging [`i18n` support](/docs/advanced-features/i18n-routing.md) with headers each `source` is automatically prefixed to handle the configured `locales` unless you add `locale: false` to the header:
+When leveraging [`i18n` support](/docs/advanced-features/i18n-routing.md) with headers each `source` is automatically prefixed to handle the configured `locales` unless you add `locale: false` to the header. If `locale: false` is used you must prefix the `source` with a locale for it to be matched correctly.
 
 ```js
 module.exports = {
@@ -209,6 +209,17 @@ module.exports = {
           },
         ],
       },
+      {
+        // this matches '/' since `en` is the defaultLocale
+        source: '/en',
+        locale: false,
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
     ]
   },
 }

diff --git a/docs/api-reference/next.config.js/redirects.md b/docs/api-reference/next.config.js/redirects.md
@@ -122,7 +122,7 @@ module.exports = {
 
 ### Redirects with i18n support
 
-When leveraging [`i18n` support](/docs/advanced-features/i18n-routing.md) with redirects each `source` and `destination` is automatically prefixed to handle the configured `locales` unless you add `locale: false` to the redirect:
+When leveraging [`i18n` support](/docs/advanced-features/i18n-routing.md) with redirects each `source` and `destination` is automatically prefixed to handle the configured `locales` unless you add `locale: false` to the redirect. If `locale: false` is used you must prefix the `source` and `destination` with a locale for it to be matched correctly.
 
 ```js
 module.exports = {
@@ -145,6 +145,13 @@ module.exports = {
         locale: false,
         permanent: false,
       },
+      {
+        // this matches '/' since `en` is the defaultLocale
+        source: '/en',
+        destination: '/en/another',
+        locale: false,
+        permanent: false,
+      },
     ]
   },
 }

diff --git a/docs/api-reference/next.config.js/rewrites.md b/docs/api-reference/next.config.js/rewrites.md
@@ -166,7 +166,7 @@ module.exports = {
 
 ### Rewrites with i18n support
 
-When leveraging [`i18n` support](/docs/advanced-features/i18n-routing.md) with rewrites each `source` and `destination` is automatically prefixed to handle the configured `locales` unless you add `locale: false` to the rewrite:
+When leveraging [`i18n` support](/docs/advanced-features/i18n-routing.md) with rewrites each `source` and `destination` is automatically prefixed to handle the configured `locales` unless you add `locale: false` to the rewrite. If `locale: false` is used you must prefix the `source` and `destination` with a locale for it to be matched correctly.
 
 ```js
 module.exports = {
@@ -187,6 +187,12 @@ module.exports = {
         destination: '/nl/another',
         locale: false,
       },
+      {
+        // this matches '/' since `en` is the defaultLocale
+        source: '/en',
+        destination: '/en/another',
+        locale: false,
+      },
     ]
   },
 }

diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
@@ -93,7 +93,9 @@ Try it out:
 
 ### sizes
 
-A string mapping media queries to device sizes. Defaults to [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes).
+A string mapping media queries to device sizes. Defaults to `100vw`.
+
+We recommend setting `sizes` when `layout="responsive"` and your image will not be the same width as the viewport.
 
 [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).
 

diff --git a/docs/api-reference/next/link.md b/docs/api-reference/next/link.md
@@ -113,7 +113,8 @@ function NavLink({ href, name }) {
 export default NavLink
 ```
 
-> **Note**: If you’re using [emotion](https://emotion.sh/)’s JSX pragma feature (`@jsx jsx`), you must use `passHref` even if you use an `<a>` tag directly.
+- If you’re using [emotion](https://emotion.sh/)’s JSX pragma feature (`@jsx jsx`), you must use `passHref` even if you use an `<a>` tag directly.
+- The component should support `onClick` property to trigger navigation correctly
 
 ## If the child is a function component
 

diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md
@@ -114,8 +114,8 @@ The `context` parameter is an object containing the following keys:
 > This includes reading from the filesystem or a database.
 
 > **Note**: You should not use [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to
-> call an API route in your application.
-> Instead, directly import the API route and call its function yourself.
+> call an API route in `getStaticProps`.
+> Instead, directly import the logic used inside your API route.
 > You may need to slightly refactor your code for this approach.
 >
 > Fetching from an external API is fine!
@@ -661,8 +661,8 @@ The `context` parameter is an object containing the following keys:
 > This includes reading from the filesystem or a database.
 
 > **Note**: You should not use [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to
-> call an API route in your application.
-> Instead, directly import the API route and call its function yourself.
+> call an API route in `getServerSideProps`.
+> Instead, directly import the logic used inside your API route.
 > You may need to slightly refactor your code for this approach.
 >
 > Fetching from an external API is fine!

diff --git a/docs/basic-features/environment-variables.md b/docs/basic-features/environment-variables.md
@@ -63,8 +63,12 @@ export async function getStaticProps() {
 > ```bash
 > # .env
 > A=abc
-> WRONG=pre$A # becomes "preabc"
-> CORRECT=pre\$A # becomes "pre$A"
+>
+> # becomes "preabc"
+> WRONG=pre$A
+>
+> # becomes "pre$A"
+> CORRECT=pre\$A
 > ```
 
 ## Exposing Environment Variables to the Browser

diff --git a/docs/deployment.md b/docs/deployment.md
@@ -40,7 +40,7 @@ By using the DPS workflow, in addition to doing _code reviews_, you can do _depl
 For example, the [hybrid pages](/docs/basic-features/pages.md) approach is fully supported out of the box.
 
 - Every page can either use [Static Generation](/docs/basic-features/pages.md#static-generation) or [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering).
-- Pages that use [Static Generation](/docs/basic-features/pages.md#static-generation) and assets (JS, CSS, images, fonts, etc) will automatically be served from the [Vercel's Edge Network](https://vercel.com/docs/v2/edge-network/overview), which is blazingly fast.
+- Pages that use [Static Generation](/docs/basic-features/pages.md#static-generation) and assets (JS, CSS, images, fonts, etc) will automatically be served from [Vercel's Edge Network](https://vercel.com/docs/v2/edge-network/overview), which is blazingly fast.
 - Pages that use [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering) and [API routes](/docs/api-routes/introduction.md) will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely.
 
 ### Custom Domains, Environment Variables, Automatic HTTPS, and more

diff --git a/docs/routing/introduction.md b/docs/routing/introduction.md
@@ -36,7 +36,7 @@ To match a dynamic segment you can use the bracket syntax. This allows you to ma
 
 ## Linking between pages
 
-The Next.js router allows you to do client-side route transitions between pages, similarly to a single-page application.
+The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application.
 
 A React component called `Link` is provided to do this client-side route transition.
 

diff --git a/errors/next-export-no-build-id.md b/errors/next-export-no-build-id.md
@@ -0,0 +1,10 @@
+# Could not find a production build
+
+#### Why This Error Occurred
+
+When running `next export` a production build is needed.
+
+#### Possible Ways to Fix It
+
+- Run `next build` to create a production build before running `next export`.
+- If your intention was to run the development server run `next dev` instead.
diff --git a/errors/production-start-no-build-id.md b/errors/production-start-no-build-id.md
@@ -0,0 +1,10 @@
+# Could not find a production build
+
+#### Why This Error Occurred
+
+When running `next start` or a custom server in production mode a production build is needed.
+
+#### Possible Ways to Fix It
+
+- Run `next build` to create a production build before booting up the production server.
+- If your intention was to run the development server run `next dev` instead.
diff --git a/errors/undefined-webpack-config.md b/errors/undefined-webpack-config.md
@@ -0,0 +1,28 @@
+# Missing webpack config
+
+#### Why This Error Occurred
+
+The value returned from the custom `webpack` function in your `next.config.js` was undefined. This can occur from the initial config value not being returned.
+
+#### Possible Ways to Fix It
+
+Make sure to return the `webpack` config from your custom `webpack` function in your `next.config.js`
+
+```js
+// next.config.js
+
+module.exports = {
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    // Note: we provide webpack above so you should not `require` it
+    // Perform customizations to webpack config
+    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
+
+    // Important: return the modified config
+    return config
+  },
+}
+```
+
+### Useful Links
+
+- [Custom webpack config Documentation](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config)
diff --git a/examples/custom-server-typescript/.gitignore b/examples/custom-server-typescript/.gitignore
@@ -13,7 +13,7 @@
 /out/
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

diff --git a/examples/with-apollo-and-redux/README.md b/examples/with-apollo-and-redux/README.md
@@ -4,6 +4,8 @@ This example serves as a conduit if you were using Apollo 1.X with Redux, and ar
 
 In 3.0.0, Apollo serves out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/vercel/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/vercel/next.js/tree/master/examples/with-redux) examples.
 
+To inspect the GraphQL API, use its [web IDE](https://nextjs-graphql-with-prisma-simple.vercel.app/api).
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com):

diff --git a/examples/with-apollo-and-redux/components/PostList.js b/examples/with-apollo-and-redux/components/PostList.js
@@ -4,7 +4,7 @@ import PostUpvoter from './PostUpvoter'
 
 export const ALL_POSTS_QUERY = gql`
   query allPosts($first: Int!, $skip: Int!) {
-    allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+    allPosts(orderBy: { createdAt: desc }, first: $first, skip: $skip) {
       id
       title
       votes

diff --git a/examples/with-apollo-and-redux/components/PostUpvoter.js b/examples/with-apollo-and-redux/components/PostUpvoter.js
@@ -1,9 +1,9 @@
 import { gql, useMutation } from '@apollo/client'
 import PropTypes from 'prop-types'
 
-const UPDATE_POST_MUTATION = gql`
-  mutation updatePost($id: ID!, $votes: Int) {
-    updatePost(id: $id, votes: $votes) {
+const VOTE_POST = gql`
+  mutation votePost($id: String!) {
+    votePost(id: $id) {
       __typename
       id
       votes
@@ -12,13 +12,12 @@ const UPDATE_POST_MUTATION = gql`
 `
 
 const PostUpvoter = ({ votes, id }) => {
-  const [updatePost] = useMutation(UPDATE_POST_MUTATION)
+  const [votePost] = useMutation(VOTE_POST)
 
   const upvotePost = () => {
-    updatePost({
+    votePost({
       variables: {
         id,
-        votes: votes + 1,
       },
       optimisticResponse: {
         __typename: 'Mutation',

diff --git a/examples/with-apollo-and-redux/components/Submit.js b/examples/with-apollo-and-redux/components/Submit.js
@@ -1,5 +1,4 @@
 import { gql, useMutation } from '@apollo/client'
-import { ALL_POSTS_QUERY, allPostsQueryVars } from './PostList'
 
 const CREATE_POST_MUTATION = gql`
   mutation createPost($title: String!, $url: String!) {
@@ -26,19 +25,22 @@ const Submit = () => {
 
     createPost({
       variables: { title, url },
-      update: (proxy, { data: { createPost } }) => {
-        const data = proxy.readQuery({
-          query: ALL_POSTS_QUERY,
-          variables: allPostsQueryVars,
-        })
-        // Update the cache with the new post at the top of the
-        proxy.writeQuery({
-          query: ALL_POSTS_QUERY,
-          data: {
-            ...data,
-            allPosts: [createPost, ...data.allPosts],
+      update: (cache, { data: { createPost } }) => {
+        cache.modify({
+          fields: {
+            allPosts(existingPosts = []) {
+              const newPostRef = cache.writeFragment({
+                data: createPost,
+                fragment: gql`
+                  fragment NewPost on allPosts {
+                    id
+                    type
+                  }
+                `,
+              })
+              return [newPostRef, ...existingPosts]
+            },
           },
-          variables: allPostsQueryVars,
         })
       },
     })

diff --git a/examples/with-apollo-and-redux/lib/apollo.js b/examples/with-apollo-and-redux/lib/apollo.js
@@ -2,14 +2,15 @@ import { useMemo } from 'react'
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 import { concatPagination } from '@apollo/client/utilities'
 import merge from 'deepmerge'
+import isEqual from 'lodash/isEqual'
 
 let apolloClient
 
 function createApolloClient() {
   return new ApolloClient({
     ssrMode: typeof window === 'undefined',
     link: new HttpLink({
-      uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
+      uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
       credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
     }),
     cache: new InMemoryCache({
@@ -34,7 +35,15 @@ export function initializeApollo(initialState = null) {
     const existingCache = _apolloClient.extract()
 
     // Merge the existing cache into data passed from getStaticProps/getServerSideProps
-    const data = merge(initialState, existingCache)
+    const data = merge(initialState, existingCache, {
+      // combine arrays using object equality (like in sets)
+      arrayMerge: (destinationArray, sourceArray) => [
+        ...sourceArray,
+        ...destinationArray.filter((d) =>
+          sourceArray.every((s) => !isEqual(d, s))
+        ),
+      ],
+    })
 
     // Restore the cache with the merged data
     _apolloClient.cache.restore(data)

diff --git a/examples/with-apollo-and-redux/package.json b/examples/with-apollo-and-redux/package.json
@@ -10,6 +10,7 @@
     "@apollo/client": "^3.0.0",
     "deepmerge": "^4.2.2",
     "graphql": "14.5.8",
+    "lodash": "4.17.20",
     "next": "latest",
     "prop-types": "^15.6.0",
     "react": "^16.11.0",