Merge branch 'canary' into bugfix/hash-function

docs/api-reference/next/image.md

@@ -152,6 +152,7 @@ Try it out:
 
 - [Demo the `blur` placeholder](https://image-component.nextjs.gallery/placeholder)
 - [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
+- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
 
 ## Advanced Props
 
@@ -208,6 +209,7 @@ Try it out:
 
 - [Demo the default `blurDataURL` prop](https://image-component.nextjs.gallery/placeholder)
 - [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
+- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
 
 You can also [generate a solid color Data URL](https://png-pixel.com) to match the image.
 

errors/page-data-collection-timeout.md

@@ -11,7 +11,7 @@ When restarted it will retry all uncompleted jobs, but if a job was unsuccessful
 - Make sure that there is no infinite loop during execution.
 - Make sure all Promises in `getStaticPaths` `resolve` or `reject` correctly.
 - Avoid very long timeouts for network requests.
-- Increase the timeout by changing the `experimental.pageDataCollectionTimeout` configuration option (default `60` in seconds).
+- Increase the timeout by changing the `config.staticPageGenerationTimeout` configuration option (default `60` in seconds).
 
 ### Useful Links
 

errors/static-page-generation-timeout.md

@@ -11,7 +11,7 @@ When restarted it will retry all uncompleted jobs, but if a job was unsuccessful
 - Make sure that there is no infinite loop during execution.
 - Make sure all Promises in `getStaticPaths`/`getStaticProps` `resolve` or `reject` correctly.
 - Avoid very long timeouts for network requests.
-- Increase the timeout by changing the `experimental.staticPageGenerationTimeout` configuration option (default `60` in seconds).
+- Increase the timeout by changing the `staticPageGenerationTimeout` configuration option (default `60` in seconds).
 
 ### Useful Links
 

examples/image-component/pages/color.js

@@ -0,0 +1,42 @@
+import Image from 'next/image'
+import ViewSource from '../components/view-source'
+
+// Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
+const keyStr =
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+
+const triplet = (e1, e2, e3) =>
+  keyStr.charAt(e1 >> 2) +
+  keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
+  keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
+  keyStr.charAt(e3 & 63)
+
+const rgbDataURL = (r, g, b) =>
+  `data:image/gif;base64,R0lGODlhAQABAPAA${
+    triplet(0, r, g) + triplet(b, 255, 255)
+  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
+
+const Color = () => (
+  <div>
+    <ViewSource pathname="pages/color.js" />
+    <h1>Image Component With Color Data URL</h1>
+    <Image
+      alt="Dog"
+      src="/dog.jpg"
+      placeholder="blur"
+      blurDataURL={rgbDataURL(237, 181, 6)}
+      width={750}
+      height={1000}
+    />
+    <Image
+      alt="Cat"
+      src="/cat.jpg"
+      placeholder="blur"
+      blurDataURL={rgbDataURL(2, 129, 210)}
+      width={750}
+      height={1000}
+    />
+  </div>
+)
+
+export default Color

examples/image-component/pages/index.js

@@ -84,7 +84,12 @@ const Index = () => (
         </li>
         <li>
           <Link href="/shimmer">
-            <a>placeholder="blur" with custom blurDataURL</a>
+            <a>placeholder="blur" with animated shimmer blurDataURL</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/color">
+            <a>placeholder="blur" with solid color blurDataURL</a>
           </Link>
         </li>
       </ul>

examples/with-sentry/README.md

@@ -21,7 +21,7 @@ It only takes a few steps to create and deploy your own version of this example
 
 You can deploy a copy of this project directly to [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example).
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-sentry&project-name=nextjs-sentry-example&repository-name=nextjs-sentry-example&env=NEXT_PUBLIC_SENTRY_DSN&envDescription=DSN%20Key%20required%20by%20Sentry&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-sentry%23step-1-enable-error-tracking)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-sentry&project-name=nextjs-sentry-example&repository-name=nextjs-sentry-example&integration-ids=oac_5lUsiANun1DEzgLg0NZx5Es3)
 
 This will clone this example to your GitHub org, create a linked project in Vercel, and prompt you to install the Vercel Sentry Integration. (You can read more about the integration [on Vercel](https://vercel.com/integrations/sentry) and in [the Sentry docs](https://docs.sentry.io/product/integrations/deployment/vercel/).)
 

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "11.1.3-canary.87"
+  "version": "11.1.3-canary.88"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "11.1.3-canary.87",
+  "version": "11.1.3-canary.88",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "11.1.3-canary.87",
+  "version": "11.1.3-canary.88",
   "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.1.3-canary.87",
+    "@next/eslint-plugin-next": "11.1.3-canary.88",
     "@rushstack/eslint-patch": "^1.0.6",
     "@typescript-eslint/parser": "^4.20.0",
     "eslint-import-resolver-node": "^0.3.4",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "11.1.3-canary.87",
+  "version": "11.1.3-canary.88",
   "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": "11.1.3-canary.87",
+  "version": "11.1.3-canary.88",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

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

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "11.1.3-canary.87",
+  "version": "11.1.3-canary.88",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "11.1.3-canary.87",
+  "version": "11.1.3-canary.88",
   "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": "11.1.3-canary.87",
+  "version": "11.1.3-canary.88",
   "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": "11.1.3-canary.87",
+  "version": "11.1.3-canary.88",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next/build/entries.ts

@@ -2,16 +2,19 @@ import chalk from 'chalk'
 import { posix, join } from 'path'
 import { stringify } from 'querystring'
 import { API_ROUTE, DOT_NEXT_ALIAS, PAGES_DIR_ALIAS } from '../lib/constants'
+import { MIDDLEWARE_ROUTE } from '../lib/constants'
 import { __ApiPreviewProps } from '../server/api-utils'
 import { isTargetLikeServerless } from '../server/config'
 import { normalizePagePath } from '../server/normalize-page-path'
 import { warn } from './output/log'
+import { MiddlewareLoaderOptions } from './webpack/loaders/next-middleware-loader'
 import { ClientPagesLoaderOptions } from './webpack/loaders/next-client-pages-loader'
 import { ServerlessLoaderQuery } from './webpack/loaders/next-serverless-loader'
 import { LoadedEnvFiles } from '@next/env'
 import { NextConfigComplete } from '../server/config-shared'
 import type webpack5 from 'webpack5'
 
+type ObjectValue<T> = T extends { [key: string]: infer V } ? V : never
 type PagesMapping = {
   [page: string]: string
 }
@@ -118,6 +121,18 @@ export function createEntrypoints(
 
     const isLikeServerless = isTargetLikeServerless(target)
 
+    if (page.match(MIDDLEWARE_ROUTE)) {
+      const loaderOpts: MiddlewareLoaderOptions = {
+        absolutePagePath: pages[page],
+        page,
+      }
+
+      client[clientBundlePath] = `next-middleware-loader?${stringify(
+        loaderOpts
+      )}!`
+      return
+    }
+
     if (isApiRoute && isLikeServerless) {
       const serverlessLoaderOptions: ServerlessLoaderQuery = {
         page,
@@ -170,54 +185,56 @@ export function createEntrypoints(
   }
 }
 
-export function finalizeEntrypoint(
-  name: string,
-  value: any,
+export function finalizeEntrypoint({
+  name,
+  value,
+  isServer,
+}: {
   isServer: boolean
-): any {
+  name: string
+  value: ObjectValue<webpack5.EntryObject>
+}): ObjectValue<webpack5.EntryObject> {
+  const entry =
+    typeof value !== 'object' || Array.isArray(value)
+      ? { import: value }
+      : value
+
   if (isServer) {
     const isApi = name.startsWith('pages/api/')
-    const runtime = isApi ? 'webpack-api-runtime' : 'webpack-runtime'
-    const layer = isApi ? 'api' : undefined
-    const publicPath = isApi ? '' : undefined
-    if (typeof value === 'object' && !Array.isArray(value)) {
-      return {
-        publicPath,
-        runtime,
-        layer,
-        ...value,
-      }
-    } else {
-      return {
-        import: value,
-        publicPath,
-        runtime,
-        layer,
-      }
+    return {
+      publicPath: isApi ? '' : undefined,
+      runtime: isApi ? 'webpack-api-runtime' : 'webpack-runtime',
+      layer: isApi ? 'api' : undefined,
+      ...entry,
     }
-  } else {
-    if (
-      name !== 'polyfills' &&
-      name !== 'main' &&
-      name !== 'amp' &&
-      name !== 'react-refresh'
-    ) {
-      const dependOn =
+  }
+
+  if (name.match(MIDDLEWARE_ROUTE)) {
+    return {
+      filename: 'server/[name].js',
+      layer: 'middleware',
+      library: {
+        name: ['_ENTRIES', `middleware_[name]`],
+        type: 'assign',
+      },
+      ...entry,
+    }
+  }
+
+  if (
+    name !== 'polyfills' &&
+    name !== 'main' &&
+    name !== 'amp' &&
+    name !== 'react-refresh'
+  ) {
+    return {
+      dependOn:
         name.startsWith('pages/') && name !== 'pages/_app'
           ? 'pages/_app'
-          : 'main'
-      if (typeof value === 'object' && !Array.isArray(value)) {
-        return {
-          dependOn,
-          ...value,
-        }
-      } else {
-        return {
-          import: value,
-          dependOn,
-        }
-      }
+          : 'main',
+      ...entry,
     }
   }
-  return value
+
+  return entry
 }