Merge branch 'canary' into fix/module-not-found-test

.github/workflows/build_test_deploy.yml

@@ -77,23 +77,6 @@ jobs:
     steps:
       - run: exit 0
 
-  testMacOS:
-    name: macOS (Basic, Production, Acceptance)
-    runs-on: macos-latest
-    env:
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_TEST_JOB: 1
-      HEADLESS: true
-
-    steps:
-      - uses: actions/checkout@v2
-      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      # Installing dependencies again since OS changed
-      - run: yarn install --frozen-lockfile --check-files || yarn install --frozen-lockfile --check-files
-      - run: node run-tests.js test/integration/production/test/index.test.js
-      - run: node run-tests.js test/integration/basic/test/index.test.js
-      - run: node run-tests.js test/acceptance/*
-
   testWebpack5:
     name: webpack 5 (Basic, Production, Acceptance)
     runs-on: ubuntu-latest

.github/workflows/test_macos.yml

@@ -0,0 +1,22 @@
+on:
+  push:
+    branches: [canary]
+
+name: Test macOS
+
+jobs:
+  testMacOS:
+    name: macOS (Basic, Production, Acceptance)
+    runs-on: macos-latest
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      NEXT_TEST_JOB: 1
+      HEADLESS: true
+
+    steps:
+      - uses: actions/checkout@v2
+      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
+      - run: yarn install --frozen-lockfile --check-files || yarn install --frozen-lockfile --check-files
+      - run: node run-tests.js test/integration/production/test/index.test.js
+      - run: node run-tests.js test/integration/basic/test/index.test.js
+      - run: node run-tests.js test/acceptance/*

docs/api-reference/cli.md

@@ -48,6 +48,14 @@ NODE_OPTIONS='--inspect' next
 
 The first load is colored green, yellow, or red. Aim for green for performant applications.
 
+You can enable production profiling for React with the `--profile` flag in `next build`. This requires Next.js 9.5:
+
+```bash
+next build --profile
+```
+
+After that, you can use the profiler in the same way as you would in development.
+
 ## Development
 
 `next dev` starts the application in development mode with hot-code reloading, error reporting, and more:

docs/api-reference/next.config.js/runtime-configuration.md

@@ -6,8 +6,6 @@ description: Add client and server runtime configuration to your Next.js app.
 
 > Generally you'll want to use [build-time environment variables](/docs/api-reference/next.config.js/environment-variables.md) to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
 
-> Runtime configuration is not available when using the [`serverless` target](/docs/api-reference/next.config.js/build-target.md#serverless-target).
-
 To add runtime configuration to your app open `next.config.js` and add the `publicRuntimeConfig` and `serverRuntimeConfig` configs:
 
 ```js

errors/invalid-external-rewrite.md

@@ -0,0 +1,13 @@
+# Invalid External Rewrite
+
+#### Why This Error Occurred
+
+A rewrite was defined with both `basePath: false` and an internal `destination`. Rewrites that capture urls outside of the `basePath` must route externally, as they are intended for proxying in the case of incremental adoption of Next.js in a project.
+
+#### Possible Ways to Fix It
+
+Look for any rewrite where `basePath` is `false` and make sure its `destination` starts with `http://` or `https://`.
+
+### Useful Links
+
+- [Rewrites section in Documentation](https://nextjs.org/docs/api-reference/next.config.js/rewrites)

examples/blog-starter-typescript/components/alert.tsx

@@ -18,7 +18,7 @@ const Alert = ({ preview }: Props) => {
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This page is a preview.{' '}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"

examples/blog-starter/components/alert.js

@@ -14,7 +14,7 @@ export default function Alert({ preview }) {
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This page is a preview.{' '}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"

examples/cms-cosmic/lib/markdownToHtml.js

@@ -2,6 +2,6 @@ import remark from 'remark'
 import html from 'remark-html'
 
 export default async function markdownToHtml(markdown) {
-  const result = await remark().use(html).processSync(markdown)
+  const result = await remark().use(html).process(markdown)
   return result.toString()
 }

examples/cms-datocms/lib/markdownToHtml.js

@@ -2,6 +2,6 @@ import remark from 'remark'
 import html from 'remark-html'
 
 export default async function markdownToHtml(markdown) {
-  const result = await remark().use(html).processSync(markdown)
+  const result = await remark().use(html).process(markdown)
   return result.toString()
 }

examples/cms-storyblok/lib/markdownToHtml.js

@@ -2,6 +2,6 @@ import remark from 'remark'
 import html from 'remark-html'
 
 export default async function markdownToHtml(markdown) {
-  const result = await remark().use(html).processSync(markdown)
+  const result = await remark().use(html).process(markdown)
   return result.toString()
 }

examples/cms-strapi/lib/markdownToHtml.js

@@ -2,6 +2,6 @@ import remark from 'remark'
 import html from 'remark-html'
 
 export default async function markdownToHtml(markdown) {
-  const result = await remark().use(html).processSync(markdown)
+  const result = await remark().use(html).process(markdown)
   return result.toString()
 }

examples/cms-takeshape/lib/markdownToHtml.js

@@ -2,6 +2,6 @@ import remark from 'remark'
 import html from 'remark-html'
 
 export default async function markdownToHtml(markdown) {
-  const result = await remark().use(html).processSync(markdown)
+  const result = await remark().use(html).process(markdown)
   return result.toString()
 }

examples/custom-server-typescript/package.json

@@ -7,17 +7,17 @@
     "start": "cross-env NODE_ENV=production node dist/index.js"
   },
   "dependencies": {
-    "cross-env": "^5.2.0",
+    "cross-env": "^7.0.2",
     "next": "latest",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "@types/node": "^12.0.12",
-    "@types/react": "^16.8.17",
-    "@types/react-dom": "16.8.4",
-    "nodemon": "^1.19.0",
-    "ts-node": "^8.1.0",
-    "typescript": "^3.4.5"
+    "@types/react": "^16.9.44",
+    "@types/react-dom": "^16.9.8",
+    "nodemon": "^2.0.4",
+    "ts-node": "^8.10.2",
+    "typescript": "3.8.3"
   }
 }

examples/with-apollo-and-redux/lib/apollo.js

@@ -29,7 +29,11 @@ export function initializeApollo(initialState = null) {
   // If your page has Next.js data fetching methods that use Apollo Client, the initial state
   // get hydrated here
   if (initialState) {
-    _apolloClient.cache.restore(initialState)
+    // Get existing cache, loaded during client side data fetching
+    const existingCache = _apolloClient.extract()
+    // Restore the cache using the data passed from getStaticProps/getServerSideProps
+    // combined with the existing cached data
+    _apolloClient.cache.restore({ ...existingCache, ...initialState })
   }
   // For SSG and SSR always create a new Apollo Client
   if (typeof window === 'undefined') return _apolloClient

examples/with-apollo/README.md

@@ -4,7 +4,7 @@
 
 In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser.
 
-This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
+This example relies on [Prisma + Nexus](https://github.com/prisma-labs/nextjs-graphql-api-examples) for its GraphQL backend.
 
 ## Demo
 

examples/with-apollo/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

examples/with-apollo/components/PostUpvoter.js

@@ -1,11 +1,11 @@
 import { gql, useMutation } from '@apollo/client'
 
 const UPDATE_POST_MUTATION = gql`
-  mutation updatePost($id: ID!, $votes: Int) {
-    updatePost(id: $id, votes: $votes) {
-      __typename
+  mutation votePost($id: String!) {
+    votePost(id: $id) {
       id
       votes
+      __typename
     }
   }
 `
@@ -17,11 +17,10 @@ export default function PostUpvoter({ votes, id }) {
     updatePost({
       variables: {
         id,
-        votes: votes + 1,
       },
       optimisticResponse: {
         __typename: 'Mutation',
-        updatePost: {
+        votePost: {
           __typename: 'Post',
           id,
           votes: votes + 1,

examples/with-apollo/components/Submit.js

@@ -31,7 +31,7 @@ export default function Submit() {
           query: ALL_POSTS_QUERY,
           variables: allPostsQueryVars,
         })
-        // Update the cache with the new post at the top of the
+        // Update the cache with the new post at the top of the list
         proxy.writeQuery({
           query: ALL_POSTS_QUERY,
           data: {

examples/with-apollo/lib/apolloClient.js

@@ -8,7 +8,7 @@ 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({
@@ -29,7 +29,11 @@ export function initializeApollo(initialState = null) {
   // If your page has Next.js data fetching methods that use Apollo Client, the initial state
   // gets hydrated here
   if (initialState) {
-    _apolloClient.cache.restore(initialState)
+    // Get existing cache, loaded during client side data fetching
+    const existingCache = _apolloClient.extract()
+    // Restore the cache using the data passed from getStaticProps/getServerSideProps
+    // combined with the existing cached data
+    _apolloClient.cache.restore({ ...existingCache, ...initialState })
   }
   // For SSG and SSR always create a new Apollo Client
   if (typeof window === 'undefined') return _apolloClient

examples/with-apollo/package.json

@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@apollo/client": "^3.0.0",
+    "@apollo/client": "3.1.1",
     "graphql": "^15.3.0",
     "next": "latest",
     "prop-types": "^15.6.2",

examples/with-cxs/pages/_document.js

@@ -3,7 +3,7 @@ import cxs from 'cxs/lite'
 
 export default class MyDocument extends Document {
   static async getInitialProps({ renderPage }) {
-    const page = renderPage()
+    const page = await renderPage()
     const style = cxs.getCss()
     return { ...page, style }
   }

examples/with-firebase-authentication/components/FirebaseAuth.js

@@ -3,8 +3,9 @@ import { useEffect, useState } from 'react'
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
 import firebase from 'firebase/app'
 import 'firebase/auth'
-import cookie from 'js-cookie'
 import initFirebase from '../utils/auth/initFirebase'
+import { setUserCookie } from '../utils/auth/userCookies'
+import { mapUserData } from '../utils/auth/mapUserData'
 
 // Init the Firebase app.
 initFirebase()
@@ -23,17 +24,8 @@ const firebaseAuthConfig = {
   credentialHelper: 'none',
   callbacks: {
     signInSuccessWithAuthResult: async ({ user }, redirectUrl) => {
-      // xa is the access token, which can be retrieved through
-      // firebase.auth().currentUser.getIdToken()
-      const { uid, email, xa } = user
-      const userData = {
-        id: uid,
-        email,
-        token: xa,
-      }
-      cookie.set('auth', userData, {
-        expires: 1,
-      })
+      const userData = mapUserData(user)
+      setUserCookie(userData)
     },
   },
 }

examples/with-firebase-authentication/pages/index.js

@@ -51,7 +51,7 @@ const Index = () => {
         </Link>
       </div>
       {error && <div>Failed to fetch food!</div>}
-      {data ? (
+      {data && !error ? (
         <div>Your favorite food is {data.food}.</div>
       ) : (
         <div>Loading...</div>

examples/with-firebase-authentication/utils/auth/mapUserData.js

@@ -0,0 +1,8 @@
+export const mapUserData = (user) => {
+  const { uid, email, xa } = user
+  return {
+    id: uid,
+    email,
+    token: xa,
+  }
+}

examples/with-firebase-authentication/utils/auth/useUser.js

@@ -1,9 +1,14 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import cookies from 'js-cookie'
 import firebase from 'firebase/app'
 import 'firebase/auth'
 import initFirebase from '../auth/initFirebase'
+import {
+  removeUserCookie,
+  setUserCookie,
+  getUserFromCookie,
+} from './userCookies'
+import { mapUserData } from './mapUserData'
 
 initFirebase()
 
@@ -17,8 +22,6 @@ const useUser = () => {
       .signOut()
       .then(() => {
         // Sign-out successful.
-        cookies.remove('auth')
-        setUser()
         router.push('/auth')
       })
       .catch((e) => {
@@ -27,12 +30,26 @@ const useUser = () => {
   }
 
   useEffect(() => {
-    const cookie = cookies.get('auth')
-    if (!cookie) {
+    // Firebase updates the id token every hour, this
+    // makes sure the react state and the cookie are
+    // both kept up to date
+    firebase.auth().onIdTokenChanged((user) => {
+      if (user) {
+        const userData = mapUserData(user)
+        setUserCookie(userData)
+        setUser(userData)
+      } else {
+        removeUserCookie()
+        setUser()
+      }
+    })
+
+    const userFromCookie = getUserFromCookie()
+    if (!userFromCookie) {
       router.push('/')
       return
     }
-    setUser(JSON.parse(cookie))
+    setUser(userFromCookie)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])