Merge branch 'canary' into docs/feedback-updates

.eslintrc.json

@@ -21,6 +21,7 @@
     }
   },
   "overrides": [
+    { "files": ["**/__tests__/**"], "env": { "jest": true } },
     {
       "files": ["**/*.ts", "**/*.tsx"],
       "parser": "@typescript-eslint/parser",

.github/workflows/build_test_deploy.yml

@@ -49,6 +49,10 @@ jobs:
         with:
           path: '.'
           key: ${{ github.sha }}
+
+      # TODO: remove after we fix watchpack watching too much
+      - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+
       - run: node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3
 
   testsPass:

.github/workflows/test_react_next.yml

@@ -47,4 +47,7 @@ jobs:
 
       - run: yarn upgrade react@next react-dom@next -W --dev
 
+      # TODO: remove after we fix watchpack watching too much
+      - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+
       - run: node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3

errors/404-get-initial-props.md

@@ -0,0 +1,15 @@
+# 404.js Cannot Have getInitialProps
+
+#### Why This Error Occurred
+
+In your `404.js` page you added `getInitialProps` or `getServerProps` which is not allowed as this prevents the page from being static and `404.js` is meant to provide more flexibility for a static 404 page. Having a static 404 page is the most ideal as this page can be served very often and if not static puts extra strain on your server and more invocations for serverless functions which increase the cost of hosting your site unnecessarily.
+
+#### Possible Ways to Fix It
+
+Remove `getInitialProps` from `404.js` and make sure no HOC's used in `404.js` attach `getInitialProps`.
+
+If you want to fetch data for your `404.js` page move it to a client side fetch inside of `componentDidMount` or `useEffect(() => {}, [])`.
+
+### Useful Links
+
+- [Automatic Static Optimization](https://nextjs.org/docs/advanced-features/automatic-static-optimization)

examples/api-routes-apollo-server-and-client-auth/pages/signin.js

@@ -31,15 +31,15 @@ function SignIn() {
     const passwordElement = event.currentTarget.elements.password
 
     try {
+      await client.resetStore()
       const { data } = await signIn({
         variables: {
           email: emailElement.value,
           password: passwordElement.value,
         },
       })
-      client.resetStore()
       if (data.signIn.user) {
-        router.push('/')
+        await router.push('/')
       }
     } catch (error) {
       setErrorMsg(getErrorMessage(error))

examples/api-routes-apollo-server-and-client-auth/pages/signout.js

@@ -16,12 +16,11 @@ function SignOut() {
   const [signOut] = useMutation(SignOutMutation)
 
   React.useEffect(() => {
-    if (typeof window !== 'undefined') {
-      signOut().then(() => {
-        client.resetStore()
+    signOut().then(() => {
+      client.resetStore().then(() => {
         router.push('/signin')
       })
-    }
+    })
   }, [signOut, router, client])
 
   return <p>Signing out...</p>

examples/blog-starter/now.json

@@ -1,8 +1,6 @@
 {
-  "version": 2,
   "name": "nextjs-blog-starter",
   "alias": ["nextjs-blog-starter.now.sh"],
-  "builds": [{ "src": "package.json", "use": "@now/next" }],
   "routes": [
     { "src": "/feed.json", "dest": "/_next/static/feed.json" },
     { "src": "/blog/(?<page>[^/]+)$", "dest": "/blog?page=$page" }

examples/custom-server-koa/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "cross-env": "^5.2.0",
     "koa": "^2.0.1",
-    "koa-router": "^7.1.0",
+    "@koa/router": "^8.0.7",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"

examples/custom-server-koa/server.js

@@ -1,6 +1,6 @@
 const Koa = require('koa')
 const next = require('next')
-const Router = require('koa-router')
+const Router = require('@koa/router')
 
 const port = parseInt(process.env.PORT, 10) || 3000
 const dev = process.env.NODE_ENV !== 'production'

examples/using-preact/README.md

@@ -1,6 +1,6 @@
 # Preact example
 
-This example uses [Preact](https://github.com/developit/preact) instead of React. It's a React like UI framework which is fast and small. Here we've customized Next.js to use Preact instead of React.
+This example uses [Preact](https://github.com/preactjs/preact) instead of React. It's a React like UI framework which is fast and small. Here we've customized Next.js to use Preact instead of React.
 
 Here's how we did it:
 

examples/using-preact/package.json

@@ -9,8 +9,8 @@
   "dependencies": {
     "module-alias": "2.2.2",
     "next": "latest",
-    "preact": "10.0.0",
-    "preact-render-to-string": "5.0.7"
+    "preact": "10.2.1",
+    "preact-render-to-string": "5.1.4"
   },
   "license": "ISC",
   "devDependencies": {

examples/with-apollo/lib/apollo.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import App from 'next/app'
 import Head from 'next/head'
 import { ApolloProvider } from '@apollo/react-hooks'
 import { ApolloClient } from 'apollo-client'
@@ -12,11 +13,8 @@ let globalApolloClient = null
  * Creates and provides the apolloContext
  * to a next.js PageTree. Use it by wrapping
  * your PageComponent via HOC pattern.
- * @param {Function|Class} PageComponent
- * @param {Object} [config]
- * @param {Boolean} [config.ssr=true]
  */
-export function withApollo(PageComponent, { ssr = true } = {}) {
+export const withApollo = ({ ssr = true } = {}) => PageComponent => {
   const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => {
     const client = apolloClient || initApolloClient(apolloState)
     return (
@@ -31,25 +29,44 @@ export function withApollo(PageComponent, { ssr = true } = {}) {
     const displayName =
       PageComponent.displayName || PageComponent.name || 'Component'
 
-    if (displayName === 'App') {
-      console.warn('This withApollo HOC only works with PageComponents.')
-    }
-
     WithApollo.displayName = `withApollo(${displayName})`
   }
 
   if (ssr || PageComponent.getInitialProps) {
     WithApollo.getInitialProps = async ctx => {
       const { AppTree } = ctx
+      const inAppContext = Boolean(ctx.ctx)
+
+      if (process.env.NODE_ENV === 'development') {
+        if (inAppContext) {
+          console.warn(
+            'Warning: You have opted-out of Automatic Static Optimization due to `withApollo` in `pages/_app`.\n' +
+              'Read more: https://err.sh/next.js/opt-out-auto-static-optimization\n'
+          )
+        }
+      }
 
-      // Initialize ApolloClient, add it to the ctx object so
-      // we can use it in `PageComponent.getInitialProp`.
-      const apolloClient = (ctx.apolloClient = initApolloClient())
+      if (ctx.apolloClient) {
+        throw new Error('Multiple instances of withApollo found.')
+      }
+
+      // Initialize ApolloClient
+      const apolloClient = initApolloClient()
+
+      // Add apolloClient to NextPageContext & NextAppContext
+      // This allows us to consume the apolloClient inside our
+      // custom `getInitialProps({ apolloClient })`.
+      ctx.apolloClient = apolloClient
+      if (inAppContext) {
+        ctx.ctx.apolloClient = apolloClient
+      }
 
       // Run wrapped getInitialProps methods
       let pageProps = {}
       if (PageComponent.getInitialProps) {
         pageProps = await PageComponent.getInitialProps(ctx)
+      } else if (inAppContext) {
+        pageProps = await App.getInitialProps(ctx)
       }
 
       // Only on the server:
@@ -65,14 +82,19 @@ export function withApollo(PageComponent, { ssr = true } = {}) {
           try {
             // Run all GraphQL queries
             const { getDataFromTree } = await import('@apollo/react-ssr')
-            await getDataFromTree(
-              <AppTree
-                pageProps={{
-                  ...pageProps,
-                  apolloClient,
-                }}
-              />
-            )
+
+            // Since AppComponents and PageComponents have different context types
+            // we need to modify their props a little.
+            let props
+            if (inAppContext) {
+              props = { ...pageProps, apolloClient }
+            } else {
+              props = { pageProps: { ...pageProps, apolloClient } }
+            }
+
+            // Takes React AppTree, determine which queries are needed to render,
+            // then fetche them all.
+            await getDataFromTree(<AppTree {...props} />)
           } catch (error) {
             // Prevent Apollo Client GraphQL errors from crashing SSR.
             // Handle them in components via the data.error prop:
@@ -104,7 +126,7 @@ export function withApollo(PageComponent, { ssr = true } = {}) {
  * Creates or reuses apollo client in the browser.
  * @param  {Object} initialState
  */
-function initApolloClient(initialState) {
+const initApolloClient = initialState => {
   // Make sure to create a new client for every server-side request so that data
   // isn't shared between connections (which would be bad)
   if (typeof window === 'undefined') {
@@ -123,7 +145,7 @@ function initApolloClient(initialState) {
  * Creates and configures the ApolloClient
  * @param  {Object} [initialState={}]
  */
-function createApolloClient(initialState = {}) {
+const createApolloClient = (initialState = {}) => {
   // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient
   return new ApolloClient({
     ssrMode: typeof window === 'undefined', // Disables forceFetch on the server (so queries are only run once)

examples/with-apollo/pages/client-only.js

@@ -26,7 +26,5 @@ const ClientOnlyPage = props => (
   </App>
 )
 
-export default withApollo(ClientOnlyPage, {
-  // Disable apollo ssr fetching in favour of automatic static optimization
-  ssr: false,
-})
+// Disable apollo ssr fetching in favour of automatic static optimization
+export default withApollo({ ssr: false })(ClientOnlyPage)

examples/with-apollo/pages/index.js

@@ -26,4 +26,4 @@ const IndexPage = props => (
   </App>
 )
 
-export default withApollo(IndexPage)
+export default withApollo()(IndexPage)

examples/with-firebase-hosting/package.json

@@ -10,7 +10,7 @@
     "preserve": "npm run build-public && npm run build-funcs && npm run build-app && npm run copy-deps && npm run install-deps",
     "serve": "cross-env NODE_ENV=production firebase serve",
     "predeploy": "npm run build-public && npm run build-funcs && npm run build-app && npm run copy-deps",
-    "deploy": "firebase deploy",
+    "deploy": "NODE_ENV=production firebase deploy",
     "clean": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
     "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
     "build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"",

examples/with-http2/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  /*  this needs to be set to false until a bug in the compression npm module gets fixed. 
+reference: https://github.com/expressjs/compression/issues/122
+  */
+  compress: false,
+}