Merge branch 'canary' into fix/fixed_warning_unique_key_for_scripts_w…

…ith_beforeinteractive
vercel · Jul 2, 2021 · d55d2a8 · d55d2a8
2 parents 5c6d1bf + 538095c
commit d55d2a8
Show file tree

Hide file tree

Showing 45 changed files with 427 additions and 85 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -8,6 +8,7 @@ Choose the right checklist for the change that you're making:
 
 - [ ] Related issues linked using `fixes #number`
 - [ ] Integration tests added
+- [ ] Errors have helpful link attached, see `contributing.md`
 
 ## Feature
 
@@ -16,6 +17,7 @@ Choose the right checklist for the change that you're making:
 - [ ] Integration tests added
 - [ ] Documentation added
 - [ ] Telemetry added. In case of a feature if it's used or not.
+- [ ] Errors have helpful link attached, see `contributing.md`
 
 ## Documentation / Examples
 

diff --git a/contributing.md b/contributing.md
@@ -14,6 +14,20 @@ Read about our [Commitment to Open Source](https://vercel.com/oss).
 
 To contribute to [our examples](examples), take a look at the [“Adding examples” section](#adding-examples).
 
+## Adding warning/error descriptions
+
+In Next.js we have a system to add helpful links to warnings and errors.
+
+This allows for the logged message to be short while giving a broader description and instructions on how to solve the warning/error.
+
+In general all warnings and errors added should have these links attached.
+
+Below are the steps to add a new link:
+
+- Create a new markdown file under the `errors` directory based on `errors/template.md`: `cp errors/template.md errors/<error-file-name>.md`
+- Add the newly added file to `errors/manifest.json`
+- Add the following url to your warning/error: `https://nextjs.org/docs/messages/<file-path-without-dotmd>`. For example to link to `errors/api-routes-static-export.md` you use the url: `https://nextjs.org/docs/messages/api-routes-static-export`
+
 ## To run tests
 
 Make sure you have `chromedriver` installed for your Chrome version. You can install it with
@@ -155,3 +169,7 @@ yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
 ````
+
+## Publishing
+
+Repository maintainers can use `yarn publish-canary` to publish a new version of all packages to npm.
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
@@ -195,6 +195,10 @@ The image position when using `layout="fill"`.
 
 [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
 
+### onLoadingComplete
+
+A callback function that is invoked once the image is completely loaded and the placeholder has been removed.
+
 ### loading
 
 > **Attention**: This property is only meant for advanced usage. Switching an
@@ -242,6 +246,7 @@ Other properties on the `<Image />` component will be passed to the underlying
 - `srcSet`. Use
   [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes)
   instead.
+- `ref`. Use [`onLoadingComplete`](#onloadingcomplete) instead.
 - `decoding`. It is always `"async"`.
 
 ## Related

diff --git a/docs/basic-features/environment-variables.md b/docs/basic-features/environment-variables.md
@@ -16,7 +16,7 @@ description: Learn to add and access environment variables in your Next.js appli
 Next.js comes with built-in support for environment variables, which allows you to do the following:
 
 - [Use `.env.local` to load environment variables](#loading-environment-variables)
-- [Expose environment variables to the browser](#exposing-environment-variables-to-the-browser)
+- [Expose environment variables to the browser by prefixing with `NEXT_PUBLIC_`](#exposing-environment-variables-to-the-browser)
 
 ## Loading Environment Variables
 

diff --git a/docs/manifest.json b/docs/manifest.json
@@ -29,6 +29,10 @@
               "title": "Font Optimization",
               "path": "/docs/basic-features/font-optimization.md"
             },
+            {
+              "title": "Script Optimization",
+              "path": "/docs/basic-features/script.md"
+            },
             {
               "title": "Static File Serving",
               "path": "/docs/basic-features/static-file-serving.md"
@@ -52,10 +56,6 @@
             {
               "title": "Supported Browsers and Features",
               "path": "/docs/basic-features/supported-browsers-features.md"
-            },
-            {
-              "title": "Script",
-              "path": "/docs/basic-features/script.md"
             }
           ]
         },

diff --git a/errors/api-routes-body-size-limit.md b/errors/api-routes-body-size-limit.md
@@ -0,0 +1,13 @@
+# API Routes Body Size Limited to 5mb
+
+#### Why This Error Occurred
+
+API Routes are meant to respond quickly and are not intended to support responding with large amounts of data. The maximum size of responses is 5 MB.
+
+#### Possible Ways to Fix It
+
+Limit your API Route responses to less than 5 MB. If you need to support sending large files to the client, you should consider using a dedicated media host for those assets. See link below for suggestions.
+
+### Useful Links
+
+[Tips to avoid the 5 MB limit](https://vercel.com/support/articles/how-to-bypass-vercel-5mb-body-size-limit-serverless-functions)
diff --git a/errors/manifest.json b/errors/manifest.json
@@ -13,6 +13,10 @@
           "title": "amp-export-validation",
           "path": "/errors/amp-export-validation.md"
         },
+        {
+          "title": "api-routes-body-size-limit",
+          "path": "/errors/api-routes-body-size-limit.md"
+        },
         {
           "title": "api-routes-static-export",
           "path": "/errors/api-routes-static-export.md"

diff --git a/errors/template.md b/errors/template.md
@@ -0,0 +1,13 @@
+# <!-- INSERT TITLE HERE -->
+
+#### Why This Error Occurred
+
+<!-- Explain why the error occurred. Ensure the description makes it clear why the warning/error exists -->
+
+#### Possible Ways to Fix It
+
+<!-- Explain how to fix the warning/error, potentially by providing alternative approaches. Ensure this section is actionable by users -->
+
+### Useful Links
+
+<!-- Add links to relevant documentation -->
diff --git a/examples/using-preact/package.json b/examples/using-preact/package.json
@@ -12,8 +12,8 @@
     "next-plugin-preact": "^3.0.3",
     "preact": "^10.5.5",
     "preact-render-to-string": "^5.1.11",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "npm:@preact/compat",
+    "react-dom": "npm:@preact/compat",
     "react-ssr-prepass": "npm:preact-ssr-prepass@^1.1.2"
   },
   "license": "MIT"

diff --git a/lerna.json b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "11.0.2-canary.3"
+  "version": "11.0.2-canary.4"
 }
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "types": "lerna run types --stream",
     "typescript": "lerna run typescript",
     "prepublish": "lerna run prepublish",
-    "publish-canary": "lerna version prerelease --preid canary --force-publish && release --pre --skip-questions",
+    "publish-canary": "git checkout canary && git pull && lerna version prerelease --preid canary --force-publish && release --pre --skip-questions",
     "publish-stable": "lerna version --force-publish",
     "lint-staged": "lint-staged",
     "next-with-deps": "./scripts/next-with-deps.sh",

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": "11.0.2-canary.3",
+  "version": "11.0.2-canary.4",
   "keywords": [
     "react",
     "next",

diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "11.0.2-canary.3",
+  "version": "11.0.2-canary.4",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "11.0.2-canary.3",
+    "@next/eslint-plugin-next": "11.0.2-canary.4",
     "@rushstack/eslint-patch": "^1.0.6",
     "@typescript-eslint/parser": "^4.20.0",
     "eslint-import-resolver-node": "^0.3.4",

diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "11.0.2-canary.3",
+  "version": "11.0.2-canary.4",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

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": "11.0.2-canary.3",
+  "version": "11.0.2-canary.4",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "11.0.2-canary.3",
+  "version": "11.0.2-canary.4",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

diff --git a/packages/next-env/package.json b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "11.0.2-canary.3",
+  "version": "11.0.2-canary.4",
   "keywords": [
     "react",
     "next",

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

diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "11.0.2-canary.3",
+  "version": "11.0.2-canary.4",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "11.0.2-canary.3",
+  "version": "11.0.2-canary.4",
   "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",

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": "11.0.2-canary.3",
+  "version": "11.0.2-canary.4",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1032,6 +1032,9 @@ export default async function getBaseWebpackConfig(
                 loader: 'next-image-loader',
                 issuer: { not: regexLikeCss },
                 dependency: { not: ['url'] },
+                options: {
+                  isServer,
+                },
               },
             ]
           : []),

diff --git a/packages/next/build/webpack/loaders/next-image-loader.js b/packages/next/build/webpack/loaders/next-image-loader.js
@@ -7,6 +7,7 @@ const BLUR_QUALITY = 70
 const VALID_BLUR_EXT = ['jpeg', 'png', 'webp']
 
 async function nextImageLoader(content) {
+  const isServer = loaderUtils.getOptions(this).isServer
   const context = this.rootContext
   const opts = { context, content }
   const interpolatedName = loaderUtils.interpolateName(
@@ -46,7 +47,9 @@ async function nextImageLoader(content) {
     blurDataURL,
   })
 
-  this.emitFile(interpolatedName, content, null)
+  if (!isServer) {
+    this.emitFile(interpolatedName, content, null)
+  }
 
   return `${'export default '} ${stringifiedData};`
 }

diff --git a/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts b/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts
@@ -344,7 +344,7 @@ export function getPageHandler(ctx: ServerlessHandlerCtx) {
                 poweredByHeader,
               },
               {
-                private: isPreviewMode,
+                private: isPreviewMode || page === '/404',
                 stateful: !!getServerSideProps,
                 revalidate: renderOpts.revalidate,
               }
@@ -385,7 +385,7 @@ export function getPageHandler(ctx: ServerlessHandlerCtx) {
                 poweredByHeader,
               },
               {
-                private: isPreviewMode,
+                private: isPreviewMode || renderOpts.is404Page,
                 stateful: !!getServerSideProps,
                 revalidate: renderOpts.revalidate,
               }

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -120,6 +120,7 @@ export type ImageProps = Omit<
   unoptimized?: boolean
   objectFit?: ImgElementStyle['objectFit']
   objectPosition?: ImgElementStyle['objectPosition']
+  onLoadingComplete?: () => void
 } & (StringImageProps | ObjectImageProps)
 
 const {
@@ -261,30 +262,37 @@ function defaultImageLoader(loaderProps: ImageLoaderProps) {
 
 // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
 // handler instead of the img's onLoad attribute.
-function removePlaceholder(
+function handleLoading(
   img: HTMLImageElement | null,
-  placeholder: PlaceholderValue
+  placeholder: PlaceholderValue,
+  onLoadingComplete?: () => void
 ) {
-  if (placeholder === 'blur' && img) {
-    const handleLoad = () => {
-      if (!img.src.startsWith('data:')) {
-        const p = 'decode' in img ? img.decode() : Promise.resolve()
-        p.catch(() => {}).then(() => {
+  if (!img) {
+    return
+  }
+  const handleLoad = () => {
+    if (!img.src.startsWith('data:')) {
+      const p = 'decode' in img ? img.decode() : Promise.resolve()
+      p.catch(() => {}).then(() => {
+        if (placeholder === 'blur') {
           img.style.filter = 'none'
           img.style.backgroundSize = 'none'
           img.style.backgroundImage = 'none'
-        })
-      }
-    }
-    if (img.complete) {
-      // If the real image fails to load, this will still remove the placeholder.
-      // This is the desired behavior for now, and will be revisited when error
-      // handling is worked on for the image component itself.
-      handleLoad()
-    } else {
-      img.onload = handleLoad
+        }
+        if (onLoadingComplete) {
+          onLoadingComplete()
+        }
+      })
     }
   }
+  if (img.complete) {
+    // If the real image fails to load, this will still remove the placeholder.
+    // This is the desired behavior for now, and will be revisited when error
+    // handling is worked on for the image component itself.
+    handleLoad()
+  } else {
+    img.onload = handleLoad
+  }
 }
 
 export default function Image({
@@ -299,6 +307,7 @@ export default function Image({
   height,
   objectFit,
   objectPosition,
+  onLoadingComplete,
   loader = defaultImageLoader,
   placeholder = 'empty',
   blurDataURL,
@@ -401,6 +410,11 @@ export default function Image({
         )
       }
     }
+    if ('ref' in rest) {
+      console.warn(
+        `Image with src "${src}" is using unsupported "ref" property. Consider using the "onLoadingComplete" property instead.`
+      )
+    }
   }
   let isLazy =
     !priority && (loading === 'lazy' || typeof loading === 'undefined')
@@ -589,9 +603,9 @@ export default function Image({
         {...imgAttributes}
         decoding="async"
         className={className}
-        ref={(element) => {
-          setRef(element)
-          removePlaceholder(element, placeholder)
+        ref={(img) => {
+          setRef(img)
+          handleLoading(img, placeholder, onLoadingComplete)
         }}
         style={imgStyle}
       />