Merge remote-tracking branch 'upstream/canary' into fix_custom_amp_va…

…lidator_path

.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/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-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\"",

lerna.json

@@ -12,5 +12,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.2.2-canary.4"
+  "version": "9.2.2-canary.5"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.2.2-canary.4",
+  "version": "9.2.2-canary.5",
   "keywords": [
     "react",
     "next",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "9.2.2-canary.4",
+  "version": "9.2.2-canary.5",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.2.2-canary.4",
+  "version": "9.2.2-canary.5",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.2.2-canary.4",
+  "version": "9.2.2-canary.5",
   "nextjs": {
     "name": "Google Analytics",
     "required-env": [

packages/next-plugin-material-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-material-ui",
-  "version": "9.2.2-canary.4",
+  "version": "9.2.2-canary.5",
   "nextjs": {
     "name": "Material UI",
     "required-env": []

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.2.2-canary.4",
+  "version": "9.2.2-canary.5",
   "nextjs": {
     "name": "Sentry",
     "required-env": [

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "9.2.2-canary.4",
+  "version": "9.2.2-canary.5",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next/build/entries.ts

@@ -67,6 +67,10 @@ export function createEntrypoints(
   const client: WebpackEntrypoints = {}
   const server: WebpackEntrypoints = {}
 
+  const hasRuntimeConfig =
+    Object.keys(config.publicRuntimeConfig).length > 0 ||
+    Object.keys(config.serverRuntimeConfig).length > 0
+
   const defaultServerlessOptions = {
     absoluteAppPath: pages['/_app'],
     absoluteDocumentPath: pages['/_document'],
@@ -77,6 +81,12 @@ export function createEntrypoints(
     generateEtags: config.generateEtags,
     canonicalBase: config.canonicalBase,
     basePath: config.experimental.basePath,
+    runtimeConfig: hasRuntimeConfig
+      ? JSON.stringify({
+          publicRuntimeConfig: config.publicRuntimeConfig,
+          serverRuntimeConfig: config.serverRuntimeConfig,
+        })
+      : '',
   }
 
   Object.keys(pages).forEach(page => {

packages/next/build/index.ts

@@ -16,7 +16,10 @@ import checkCustomRoutes, {
   Rewrite,
   Header,
 } from '../lib/check-custom-routes'
-import { PUBLIC_DIR_MIDDLEWARE_CONFLICT } from '../lib/constants'
+import {
+  PUBLIC_DIR_MIDDLEWARE_CONFLICT,
+  PAGES_404_GET_INITIAL_PROPS_ERROR,
+} from '../lib/constants'
 import { findPagesDir } from '../lib/find-pages-dir'
 import { recursiveDelete } from '../lib/recursive-delete'
 import { recursiveReadDir } from '../lib/recursive-readdir'
@@ -202,6 +205,10 @@ export default async function build(dir: string, conf = null): Promise<void> {
   const hasCustomErrorPage = mappedPages['/_error'].startsWith(
     'private-next-pages'
   )
+  const hasPages404 =
+    config.experimental.pages404 &&
+    mappedPages['/404'] &&
+    mappedPages['/404'].startsWith('private-next-pages')
 
   if (hasPublicDir) {
     try {
@@ -262,6 +269,7 @@ export default async function build(dir: string, conf = null): Promise<void> {
   const routesManifestPath = path.join(distDir, ROUTES_MANIFEST)
   const routesManifest: any = {
     version: 1,
+    pages404: !!hasPages404,
     basePath: config.experimental.basePath,
     redirects: redirects.map(r => buildCustomRoute(r, 'redirect')),
     rewrites: rewrites.map(r => buildCustomRoute(r, 'rewrite')),
@@ -511,6 +519,17 @@ export default async function build(dir: string, conf = null): Promise<void> {
             staticPages.add(page)
             isStatic = true
           }
+
+          if (hasPages404 && page === '/404') {
+            if (!result.isStatic) {
+              throw new Error(PAGES_404_GET_INITIAL_PROPS_ERROR)
+            }
+            // we need to ensure the 404 lambda is present since we use
+            // it when _app has getInitialProps
+            if (customAppGetInitialProps) {
+              staticPages.delete(page)
+            }
+          }
         } catch (err) {
           if (err.message !== 'INVALID_DEFAULT_EXPORT') throw err
           invalidPages.add(page)
@@ -569,8 +588,7 @@ export default async function build(dir: string, conf = null): Promise<void> {
   // Only export the static 404 when there is no /_error present
   const useStatic404 =
     !customAppGetInitialProps &&
-    !hasCustomErrorPage &&
-    config.experimental.static404
+    ((!hasCustomErrorPage && config.experimental.static404) || hasPages404)
 
   if (invalidPages.size > 0) {
     throw new Error(
@@ -640,7 +658,9 @@ export default async function build(dir: string, conf = null): Promise<void> {
         })
 
         if (useStatic404) {
-          defaultMap['/_errors/404'] = { page: '/_error' }
+          defaultMap['/_errors/404'] = {
+            page: hasPages404 ? '/404' : '/_error',
+          }
         }
 
         return defaultMap

packages/next/build/webpack/loaders/next-serverless-loader.ts

@@ -22,6 +22,7 @@ export type ServerlessLoaderQuery = {
   generateEtags: string
   canonicalBase: string
   basePath: string
+  runtimeConfig: string
 }
 
 const nextServerlessLoader: loader.Loader = function() {
@@ -37,6 +38,7 @@ const nextServerlessLoader: loader.Loader = function() {
     absoluteErrorPath,
     generateEtags,
     basePath,
+    runtimeConfig,
   }: ServerlessLoaderQuery =
     typeof this.query === 'string' ? parse(this.query.substr(1)) : this.query
 
@@ -50,6 +52,19 @@ const nextServerlessLoader: loader.Loader = function() {
   const escapedBuildId = escapeRegexp(buildId)
   const pageIsDynamicRoute = isDynamicRoute(page)
 
+  const runtimeConfigImports = runtimeConfig
+    ? `
+      import { setConfig } from 'next/dist/next-server/lib/runtime-config'
+    `
+    : ''
+
+  const runtimeConfigSetter = runtimeConfig
+    ? `
+      const runtimeConfig = ${runtimeConfig}
+      setConfig(runtimeConfig)
+    `
+    : 'const runtimeConfig = {}'
+
   const dynamicRouteImports = pageIsDynamicRoute
     ? `
     import { getRouteMatcher } from 'next/dist/next-server/lib/router/utils/route-matcher';
@@ -123,9 +138,14 @@ const nextServerlessLoader: loader.Loader = function() {
       import initServer from 'next-plugin-loader?middleware=on-init-server!'
       import onError from 'next-plugin-loader?middleware=on-error-server!'
       ${rewriteImports}
+      ${runtimeConfigImports}
 
       ${dynamicRouteMatcher}
       ${handleRewrites}
+      ${
+        /* this needs to be called before importing the API method */
+        runtimeConfigSetter
+      }
 
       export default async (req, res) => {
         try {
@@ -177,9 +197,16 @@ const nextServerlessLoader: loader.Loader = function() {
     import Document from '${absoluteDocumentPath}';
     import Error from '${absoluteErrorPath}';
     import App from '${absoluteAppPath}';
-    import * as ComponentInfo from '${absolutePagePath}';
     ${dynamicRouteImports}
     ${rewriteImports}
+    ${runtimeConfigImports}
+
+    ${
+      /* this needs to be called before importing the component */
+      runtimeConfigSetter
+    }
+
+    const ComponentInfo = require('${absolutePagePath}')
 
     const Component = ComponentInfo.default
     export default Component
@@ -214,6 +241,7 @@ const nextServerlessLoader: loader.Loader = function() {
         canonicalBase: "${canonicalBase}",
         buildId: "${buildId}",
         assetPrefix: "${assetPrefix}",
+        runtimeConfig: runtimeConfig.publicRuntimeConfig || {},
         ..._renderOpts
       }
       let _nextData = false

packages/next/client/index.js

@@ -99,9 +99,10 @@ class Container extends React.Component {
     // If page was exported and has a querystring
     // If it's a dynamic route or has a querystring
     if (
-      (data.nextExport &&
+      router.isSsr &&
+      ((data.nextExport &&
         (isDynamicRoute(router.pathname) || location.search)) ||
-      (Component && Component.__N_SSG && location.search)
+        (Component && Component.__N_SSG && location.search))
     ) {
       // update query on mount for exported pages
       router.replace(

packages/next/lib/constants.ts

@@ -29,3 +29,5 @@ export const SSG_GET_INITIAL_PROPS_CONFLICT = `You can not use getInitialProps w
 export const SERVER_PROPS_GET_INIT_PROPS_CONFLICT = `You can not use getInitialProps with unstable_getServerProps. Please remove one or the other`
 
 export const SERVER_PROPS_SSG_CONFLICT = `You can not use unstable_getStaticProps with unstable_getServerProps. To use SSG, please remove your unstable_getServerProps`
+
+export const PAGES_404_GET_INITIAL_PROPS_ERROR = `\`pages/404\` can not have getInitialProps/getServerProps, https://err.sh/zeit/next.js/404-get-initial-props`

packages/next/next-server/server/config.ts

@@ -53,6 +53,7 @@ const defaultConfig: { [key: string]: any } = {
     workerThreads: false,
     basePath: '',
     static404: true,
+    pages404: false,
   },
   future: {
     excludeDefaultMomentLocales: false,
@@ -254,20 +255,6 @@ export default function loadConfig(
           : canonicalBase) || ''
     }
 
-    if (
-      userConfig.target &&
-      userConfig.target !== 'server' &&
-      ((userConfig.publicRuntimeConfig &&
-        Object.keys(userConfig.publicRuntimeConfig).length !== 0) ||
-        (userConfig.serverRuntimeConfig &&
-          Object.keys(userConfig.serverRuntimeConfig).length !== 0))
-    ) {
-      // TODO: change error message tone to "Only compatible with [fat] server mode"
-      throw new Error(
-        'Cannot use publicRuntimeConfig or serverRuntimeConfig with target=serverless https://err.sh/zeit/next.js/serverless-publicRuntimeConfig'
-      )
-    }
-
     if (
       userConfig.experimental?.reactMode &&
       !reactModes.includes(userConfig.experimental.reactMode)