Merge branch 'canary' into create-next-app-ts

docs/basic-features/data-fetching.md

@@ -72,7 +72,7 @@ The `context` parameter is an object containing the following keys:
 
 `getStaticProps` should return an object with:
 
-- `props` - A **required** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
+- `props` - An **optional** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
 - `revalidate` - An **optional** amount in seconds after which a page re-generation can occur. More on [Incremental Static Regeneration](#incremental-static-regeneration)
 - `notFound` - An **optional** boolean value to allow the page to return a 404 status and page. Below is an example of how it works:
 
@@ -672,7 +672,7 @@ The `context` parameter is an object containing the following keys:
 
 `getServerSideProps` should return an object with:
 
-- `props` - A **required** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
+- `props` - An **optional** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
 - `notFound` - An **optional** boolean value to allow the page to return a 404 status and page. Below is an example of how it works:
 
   ```js

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.2.1-canary.6"
+  "version": "10.2.1-canary.8"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "10.2.1-canary.6",
+  "version": "10.2.1-canary.8",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "10.2.1-canary.6",
+  "version": "10.2.1-canary.8",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "10.2.1-canary.6",
+  "version": "10.2.1-canary.8",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

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

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "10.2.1-canary.6",
+  "version": "10.2.1-canary.8",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "10.2.1-canary.6",
+  "version": "10.2.1-canary.8",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "10.2.1-canary.6",
+  "version": "10.2.1-canary.8",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "10.2.1-canary.6",
+  "version": "10.2.1-canary.8",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

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

packages/next/build/babel/preset.ts

@@ -41,7 +41,6 @@ type NextBabelPresetOptions = {
   'preset-react'?: any
   'class-properties'?: any
   'transform-runtime'?: any
-  'experimental-modern-preset'?: PluginItem
   'styled-jsx'?: StyledJsxBabelOptions
   'preset-typescript'?: any
 }
@@ -89,10 +88,6 @@ export default (
     (Boolean(api.caller((caller: any) => !!caller && caller.hasJsxRuntime)) &&
       options['preset-react']?.runtime !== 'classic')
 
-  const isLaxModern =
-    options['preset-env']?.targets &&
-    options['preset-env'].targets.esmodules === true
-
   const presetEnvConfig = {
     // In the test environment `modules` is often needed to be set to true, babel figures that out by itself using the `'auto'` option
     // In production/development this option is set to `false` so that webpack can handle import/export with tree-shaking
@@ -122,17 +117,10 @@ export default (
     }
   }
 
-  // specify a preset to use instead of @babel/preset-env
-  const customModernPreset =
-    isLaxModern && options['experimental-modern-preset']
-
   return {
     sourceType: 'unambiguous',
     presets: [
-      customModernPreset || [
-        require('next/dist/compiled/babel/preset-env'),
-        presetEnvConfig,
-      ],
+      [require('next/dist/compiled/babel/preset-env'), presetEnvConfig],
       [
         require('next/dist/compiled/babel/preset-react'),
         {

packages/next/build/index.ts

@@ -79,6 +79,7 @@ import { trace, setGlobal } from '../telemetry/trace'
 import {
   collectPages,
   detectConflictingPaths,
+  computeFromManifest,
   getJsPageSizeInKb,
   getNamedExports,
   hasCustomGetInitialProps,
@@ -724,6 +725,11 @@ export default async function build(
           )
         }
 
+        const computedManifestData = await computeFromManifest(
+          buildManifest,
+          distDir,
+          config.experimental.gzipSize
+        )
         await Promise.all(
           pageKeys.map(async (page) => {
             const checkPageSpan = staticCheckSpan.traceChild('check-page', {
@@ -734,7 +740,9 @@ export default async function build(
               const [selfSize, allSize] = await getJsPageSizeInKb(
                 actualPage,
                 distDir,
-                buildManifest
+                buildManifest,
+                config.experimental.gzipSize,
+                computedManifestData
               )
 
               let isSsg = false
@@ -1525,6 +1533,7 @@ export default async function build(
         useStatic404,
         pageExtensions: config.pageExtensions,
         buildManifest,
+        gzipSize: config.experimental.gzipSize,
       })
     )
 

packages/next/build/utils.ts

@@ -1,8 +1,9 @@
 import '../next-server/server/node-polyfill-fetch'
 import chalk from 'chalk'
-import gzipSize from 'next/dist/compiled/gzip-size'
+import getGzipSize from 'next/dist/compiled/gzip-size'
 import textTable from 'next/dist/compiled/text-table'
 import path from 'path'
+import { promises as fs } from 'fs'
 import { isValidElementType } from 'react-is'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import {
@@ -32,11 +33,20 @@ import * as Log from './output/log'
 import { loadComponents } from '../next-server/server/load-components'
 import { trace } from '../telemetry/trace'
 
-const fileGzipStats: { [k: string]: Promise<number> } = {}
+const fileGzipStats: { [k: string]: Promise<number> | undefined } = {}
 const fsStatGzip = (file: string) => {
-  if (fileGzipStats[file]) return fileGzipStats[file]
-  fileGzipStats[file] = gzipSize.file(file)
-  return fileGzipStats[file]
+  const cached = fileGzipStats[file]
+  if (cached) return cached
+  return (fileGzipStats[file] = getGzipSize.file(file))
+}
+
+const fileSize = async (file: string) => (await fs.stat(file)).size
+
+const fileStats: { [k: string]: Promise<number> | undefined } = {}
+const fsStat = (file: string) => {
+  const cached = fileStats[file]
+  if (cached) return cached
+  return (fileStats[file] = fileSize(file))
 }
 
 export function collectPages(
@@ -70,13 +80,15 @@ export async function printTreeView(
     pageExtensions,
     buildManifest,
     useStatic404,
+    gzipSize = true,
   }: {
     distPath: string
     buildId: string
     pagesDir: string
     pageExtensions: string[]
     buildManifest: BuildManifest
     useStatic404: boolean
+    gzipSize?: boolean
   }
 ) {
   const getPrettySize = (_size: number): string => {
@@ -96,7 +108,7 @@ export async function printTreeView(
       // Re-add `static/` for root files
       .replace(/^<buildId>/, 'static')
       // Remove file hash
-      .replace(/[.-]([0-9a-z]{6})[0-9a-z]{14}(?=\.)/, '.$1')
+      .replace(/(?:^|[.-])([0-9a-z]{6})[0-9a-z]{14}(?=\.)/, '.$1')
 
   const messages: [string, string, string][] = [
     ['Page', 'Size', 'First Load JS'].map((entry) =>
@@ -115,7 +127,12 @@ export async function printTreeView(
     list = [...list, '/404']
   }
 
-  const sizeData = await computeFromManifest(buildManifest, distPath, pageInfos)
+  const sizeData = await computeFromManifest(
+    buildManifest,
+    distPath,
+    gzipSize,
+    pageInfos
+  )
 
   const pageList = list
     .slice()
@@ -378,9 +395,10 @@ let cachedBuildManifest: BuildManifest | undefined
 let lastCompute: ComputeManifestShape | undefined
 let lastComputePageInfo: boolean | undefined
 
-async function computeFromManifest(
+export async function computeFromManifest(
   manifest: BuildManifest,
   distPath: string,
+  gzipSize: boolean = true,
   pageInfos?: Map<string, PageInfo>
 ): Promise<ComputeManifestShape> {
   if (
@@ -414,6 +432,8 @@ async function computeFromManifest(
     })
   })
 
+  const getSize = gzipSize ? fsStatGzip : fsStat
+
   const commonFiles = [...files.entries()]
     .filter(([, len]) => len === expected || len === Infinity)
     .map(([f]) => f)
@@ -426,7 +446,7 @@ async function computeFromManifest(
     stats = await Promise.all(
       commonFiles.map(
         async (f) =>
-          [f, await fsStatGzip(path.join(distPath, f))] as [string, number]
+          [f, await getSize(path.join(distPath, f))] as [string, number]
       )
     )
   } catch (_) {
@@ -438,7 +458,7 @@ async function computeFromManifest(
     uniqueStats = await Promise.all(
       uniqueFiles.map(
         async (f) =>
-          [f, await fsStatGzip(path.join(distPath, f))] as [string, number]
+          [f, await getSize(path.join(distPath, f))] as [string, number]
       )
     )
   } catch (_) {
@@ -486,9 +506,13 @@ function sum(a: number[]): number {
 export async function getJsPageSizeInKb(
   page: string,
   distPath: string,
-  buildManifest: BuildManifest
+  buildManifest: BuildManifest,
+  gzipSize: boolean = true,
+  computedManifestData?: ComputeManifestShape
 ): Promise<[number, number]> {
-  const data = await computeFromManifest(buildManifest, distPath)
+  const data =
+    computedManifestData ||
+    (await computeFromManifest(buildManifest, distPath, gzipSize))
 
   const fnFilterJs = (entry: string) => entry.endsWith('.js')
 
@@ -507,11 +531,13 @@ export async function getJsPageSizeInKb(
     data.commonFiles
   ).map(fnMapRealPath)
 
+  const getSize = gzipSize ? fsStatGzip : fsStat
+
   try {
     // Doesn't use `Promise.all`, as we'd double compute duplicate files. This
     // function is memoized, so the second one will instantly resolve.
-    const allFilesSize = sum(await Promise.all(allFilesReal.map(fsStatGzip)))
-    const selfFilesSize = sum(await Promise.all(selfFilesReal.map(fsStatGzip)))
+    const allFilesSize = sum(await Promise.all(allFilesReal.map(getSize)))
+    const selfFilesSize = sum(await Promise.all(selfFilesReal.map(getSize)))
 
     return [selfFilesSize, allFilesSize]
   } catch (_) {}

packages/next/lib/typescript/writeConfigurationDefaults.ts

@@ -1,7 +1,6 @@
 import { promises as fs } from 'fs'
 import chalk from 'chalk'
 import * as CommentJson from 'next/dist/compiled/comment-json'
-import semver from 'next/dist/compiled/semver'
 import os from 'os'
 import { getTypeScriptConfiguration } from './getTypeScriptConfiguration'
 
@@ -29,9 +28,6 @@ function getDesiredCompilerOptions(
     strict: { suggested: false },
     forceConsistentCasingInFileNames: { suggested: true },
     noEmit: { suggested: true },
-    ...(semver.gte(ts.version, '4.3.0-beta')
-      ? { incremental: { suggested: true } }
-      : undefined),
 
     // These values are required and cannot be changed by the user
     // Keep this in sync with the webpack config

packages/next/lib/verifyTypeScriptSetup.ts

@@ -8,7 +8,7 @@ import { CompileError } from './compile-error'
 import { FatalError } from './fatal-error'
 
 import { getTypeScriptIntent } from './typescript/getTypeScriptIntent'
-import type { TypeCheckResult } from './typescript/runTypeCheck'
+import { TypeCheckResult } from './typescript/runTypeCheck'
 import { writeAppTypeDeclarations } from './typescript/writeAppTypeDeclarations'
 import { writeConfigurationDefaults } from './typescript/writeConfigurationDefaults'
 

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

@@ -62,6 +62,7 @@ export type NextConfig = { [key: string]: any } & {
     reactRoot: boolean
     enableBlurryPlaceholder: boolean
     disableOptimizedLoading: boolean
+    gzipSize: boolean
   }
 }
 
@@ -120,6 +121,7 @@ export const defaultConfig: NextConfig = {
     reactRoot: Number(process.env.NEXT_PRIVATE_REACT_ROOT) > 0,
     enableBlurryPlaceholder: false,
     disableOptimizedLoading: true,
+    gzipSize: true,
   },
   future: {
     strictPostcssConfiguration: false,

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

@@ -1,7 +1,7 @@
 import path from 'path'
 import { Worker } from 'jest-worker'
 import * as Log from '../../build/output/log'
-import type { CheckReasons, CheckResult } from './config-utils-worker'
+import { CheckReasons, CheckResult } from './config-utils-worker'
 import { install, shouldLoadWithWebpack5 } from './config-utils-worker'
 
 export { install, shouldLoadWithWebpack5 }

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

@@ -56,7 +56,11 @@ function assignDefaults(userConfig: { [key: string]: any }) {
         return currentConfig
       }
 
-      if (key === 'experimental' && value && value !== defaultConfig[key]) {
+      if (
+        key === 'experimental' &&
+        value !== undefined &&
+        value !== defaultConfig[key]
+      ) {
         experimentalWarning()
       }