Merge branch 'canary' into types/sass

vercel · Feb 3, 2020 · fdb31a7 · fdb31a7
2 parents 46409d9 + f7880f3
commit fdb31a7
Show file tree

Hide file tree

Showing 52 changed files with 755 additions and 112 deletions.
diff --git a/.github/workflows/build_test_deploy.yml b/.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:

diff --git a/.github/workflows/test_react_next.yml b/.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
diff --git a/errors/404-get-initial-props.md b/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)
diff --git a/errors/serverless-publicRuntimeConfig.md b/errors/serverless-publicRuntimeConfig.md
diff --git a/examples/using-preact/README.md b/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:
 

diff --git a/examples/using-preact/package.json b/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": {

diff --git a/examples/with-firebase-hosting/package.json b/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\"",

diff --git a/lerna.json b/lerna.json
@@ -12,5 +12,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.2.2-canary.4"
+  "version": "9.2.2-canary.7"
 }
diff --git a/packages/create-next-app/package.json b/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.7",
   "keywords": [
     "react",
     "next",

diff --git a/packages/create-next-app/templates/default/README.md b/packages/create-next-app/templates/default/README.md
@@ -28,9 +28,6 @@ After creating an app, it should look something like:
 ```
 .
 ├── README.md
-├── components
-│   ├── head.js
-│   └── nav.js
 ├── node_modules
 │   ├── [...]
 ├── package.json
@@ -54,7 +51,7 @@ Out of the box, we get:
 - Server rendering and indexing of `./pages/`
 - Static file serving. `./public/` is mapped to `/`
 
-Read more about [Next's Routing](https://github.com/zeit/next.js#routing)
+Read more about [Next's Routing](https://nextjs.org/docs/routing/introduction)
 
 ## Available Scripts
 
@@ -78,7 +75,7 @@ It correctly bundles React in production mode and optimizes the build for the be
 Starts the application in production mode.
 The application should be compiled with \`next build\` first.
 
-See the section in Next docs about [deployment](https://github.com/zeit/next.js/wiki/Deployment) for more information.
+See the section in Next docs about [deployment](https://nextjs.org/docs/deployment) for more information.
 
 ## Using CSS
 
@@ -107,7 +104,7 @@ export default () => (
 )
 ```
 
-Read more about [Next's CSS features](https://github.com/zeit/next.js#css).
+Read more about [Next's CSS features](https://nextjs.org/docs/basic-features/built-in-css-support).
 
 ## Adding Components
 
@@ -147,15 +144,15 @@ For the initial page load, `getInitialProps` will execute on the server only. `g
 
 _Note: `getInitialProps` can **not** be used in children components. Only in `./pages/`._
 
-Read more about [fetching data and the component lifecycle](https://github.com/zeit/next.js#fetching-data-and-component-lifecycle)
+Read more about [fetching data and the component lifecycle](https://nextjs.org/docs/basic-features/data-fetching)
 
 ## Syntax Highlighting
 
 To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered.
 
 ## Deploy to Now
 
-[now](https://zeit.co/now) offers a zero-configuration single-command deployment.
+[ZEIT Now](https://zeit.co/home?utm_source=create-next-app&utm_medium=referral&utm_campaign=Create%20Next%20App) offers a zero-configuration single-command deployment.
 
 1.  Install the `now` command-line tool either via npm `npm install -g now` or Yarn `yarn global add now`.
 
@@ -167,7 +164,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [
 
     Paste that URL into your browser when the build is complete, and you will see your deployed app.
 
-You can find more details about [`now` here](https://zeit.co/now).
+You can find more details about [`ZEIT Now` here](https://zeit.co/home?utm_source=create-next-app&utm_medium=referral&utm_campaign=Create%20Next%20App).
 
 ## Something Missing?
 

diff --git a/packages/create-next-app/templates/default/pages/index.js b/packages/create-next-app/templates/default/pages/index.js
@@ -36,7 +36,10 @@ const Home = () => (
           <p>Discover and deploy boilerplate example Next.js projects.</p>
         </a>
 
-        <a href="https://zeit.co/new/nextjs" className="card">
+        <a
+          href="https://zeit.co/new?utm_source=create-next-app&utm_medium=referral&utm_campaign=Create%20Next%20App"
+          className="card"
+        >
           <h3>Deploy &rarr;</h3>
           <p>
             Instantly deploy your Next.js site to a public URL with ZEIT Now.
@@ -46,7 +49,11 @@ const Home = () => (
     </main>
 
     <footer>
-      <a href="https://zeit.co" target="_blank" rel="noopener noreferrer">
+      <a
+        href="https://zeit.co?utm_source=create-next-app&utm_medium=referral&utm_campaign=Create%20Next%20App"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
         Powered by <img src="/zeit.svg" alt="ZEIT Logo" />
       </a>
     </footer>

diff --git a/packages/next-bundle-analyzer/package.json b/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.7",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.2.2-canary.4",
+  "version": "9.2.2-canary.7",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-plugin-google-analytics/package.json b/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.7",
   "nextjs": {
     "name": "Google Analytics",
     "required-env": [

diff --git a/packages/next-plugin-material-ui/package.json b/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.7",
   "nextjs": {
     "name": "Material UI",
     "required-env": []

diff --git a/packages/next-plugin-sentry/package.json b/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.7",
   "nextjs": {
     "name": "Sentry",
     "required-env": [

diff --git a/packages/next-polyfill-nomodule/package.json b/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.7",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

diff --git a/packages/next/build/entries.ts b/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 => {

diff --git a/packages/next/build/index.ts b/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

diff --git a/packages/next/build/utils.ts b/packages/next/build/utils.ts
@@ -592,11 +592,9 @@ export async function isPageStatic(
 
             builtPage = builtPage.replace(
               `[${repeat ? '...' : ''}${validParamKey}]`,
-              encodeURIComponent(
-                repeat
-                  ? (paramValue as string[]).join('/')
-                  : (paramValue as string)
-              )
+              repeat
+                ? (paramValue as string[]).map(encodeURIComponent).join('/')
+                : encodeURIComponent(paramValue as string)
             )
           })