Merge branch 'canary' into postcss-loader/upgrade

docs/api-reference/next.config.js/custom-webpack-config.md

@@ -23,10 +23,6 @@ In order to extend our usage of `webpack`, you can define a function that extend
 ```js
 module.exports = {
   webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
-    // Note: we provide webpack above so you should not `require` it
-    // Perform customizations to webpack config
-    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
-
     // Important: return the modified config
     return config
   },

docs/basic-features/data-fetching.md

@@ -73,7 +73,7 @@ The `context` parameter is an object containing the following keys:
 `getStaticProps` should return an object with:
 
 - `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)
+- `revalidate` - An **optional** amount in seconds after which a page re-generation can occur (defaults to: `false` or no revalidating). 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:
 
   ```js

examples/with-tailwindcss/pages/index.js

@@ -8,7 +8,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className="flex flex-col items-center justify-center flex-1 px-20 text-center">
+      <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
         <h1 className="text-6xl font-bold">
           Welcome to{' '}
           <a className="text-blue-600" href="https://nextjs.org">

lerna.json

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

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "10.2.1-canary.10",
+  "version": "10.2.1",
   "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.10",
+  "version": "10.2.1",
   "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.10",
+  "version": "10.2.1",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

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

packages/next-env/package.json

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

packages/next-mdx/package.json

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

packages/next/README.md

@@ -44,6 +44,10 @@ Our [Code of Conduct](https://github.com/vercel/next.js/blob/canary/CODE_OF_COND
 
 Please see our [contributing.md](/contributing.md).
 
+### Good First Issues
+
+We have a list of [good first issues](https://github.com/vercel/next.js/labels/good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
+
 ## Authors
 
 - Tim Neutkens ([@timneutkens](https://twitter.com/timneutkens)) – [Vercel](https://vercel.com/about/timneutkens)

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

@@ -280,23 +280,23 @@ export function getUtils({
 
   function normalizeDynamicRouteParams(params: ParsedUrlQuery) {
     let hasValidParams = true
-    if (!defaultRouteRegex) return { params, hasValidParams }
+    if (!defaultRouteRegex) return { params, hasValidParams: false }
 
     params = Object.keys(defaultRouteRegex.groups).reduce((prev, key) => {
       let value: string | string[] | undefined = params[key]
 
       // if the value matches the default value we can't rely
       // on the parsed params, this is used to signal if we need
       // to parse x-now-route-matches or not
-      const isDefaultValue = Array.isArray(value)
-        ? value.some((val) => {
-            const defaultValue = defaultRouteMatches![key]
+      const defaultValue = defaultRouteMatches![key]
 
-            return Array.isArray(defaultValue)
-              ? defaultValue.includes(val)
-              : defaultValue === val
+      const isDefaultValue = Array.isArray(defaultValue)
+        ? defaultValue.some((defaultVal) => {
+            return Array.isArray(value)
+              ? value.some((val) => val.includes(defaultVal))
+              : value?.includes(defaultVal)
           })
-        : value === defaultRouteMatches![key]
+        : value?.includes(defaultValue as string)
 
       if (isDefaultValue || typeof value === 'undefined') {
         hasValidParams = false

packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts

@@ -114,7 +114,19 @@ export class FontStylesheetGatheringPlugin {
             }
 
             this.gatheredStylesheets.push(props.href)
+
+            if (isWebpack5) {
+              const buildInfo = parser?.state?.module?.buildInfo
+
+              if (buildInfo) {
+                buildInfo.valueDependencies.set(
+                  FONT_MANIFEST,
+                  this.gatheredStylesheets
+                )
+              }
+            }
           }
+
           // React JSX transform:
           parser.hooks.call
             .for('_jsx')
@@ -161,8 +173,24 @@ export class FontStylesheetGatheringPlugin {
       }
       compilation.hooks.finishModules.tapAsync(
         this.constructor.name,
-        async (_: any, modulesFinished: Function) => {
-          const fontDefinitionPromises = this.gatheredStylesheets.map((url) =>
+        async (modules: any, modulesFinished: Function) => {
+          let fontStylesheets = this.gatheredStylesheets
+
+          if (isWebpack5) {
+            const fontUrls = new Set<string>()
+            modules.forEach((module: any) => {
+              const fontDependencies = module?.buildInfo?.valueDependencies?.get(
+                FONT_MANIFEST
+              )
+              if (fontDependencies) {
+                fontDependencies.forEach((v: string) => fontUrls.add(v))
+              }
+            })
+
+            fontStylesheets = Array.from(fontUrls)
+          }
+
+          const fontDefinitionPromises = fontStylesheets.map((url) =>
             getFontDefinitionFromNetwork(url)
           )
 
@@ -173,7 +201,7 @@ export class FontStylesheetGatheringPlugin {
             if (css) {
               const content = await minifyCss(css)
               this.manifestContent.push({
-                url: this.gatheredStylesheets[promiseIndex],
+                url: fontStylesheets[promiseIndex],
                 content,
               })
             }

packages/next/next-server/lib/router/utils/resolve-rewrites.ts

@@ -43,12 +43,13 @@ export default function resolveRewrites(
           headers: {
             host: document.location.hostname,
           },
-          cookies: Object.fromEntries(
-            document.cookie.split('; ').map((item) => {
+          cookies: document.cookie
+            .split('; ')
+            .reduce<Record<string, string>>((acc, item) => {
               const [key, ...value] = item.split('=')
-              return [key, value.join('=')]
-            })
-          ),
+              acc[key] = value.join('=')
+              return acc
+            }, {}),
         } as any,
         rewrite.has,
         parsedAs.query

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

@@ -57,12 +57,12 @@ export type NextConfig = { [key: string]: any } & {
       validator?: string
       skipValidation?: boolean
     }
-    turboMode: boolean
+    turboMode?: boolean
     eslint?: boolean
-    reactRoot: boolean
-    enableBlurryPlaceholder: boolean
-    disableOptimizedLoading: boolean
-    gzipSize: boolean
+    reactRoot?: boolean
+    enableBlurryPlaceholder?: boolean
+    disableOptimizedLoading?: boolean
+    gzipSize?: boolean
   }
 }
 

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

@@ -157,7 +157,7 @@ export default class Server {
     images: string
     fontManifest: FontManifest
     optimizeImages: boolean
-    disableOptimizedLoading: boolean
+    disableOptimizedLoading?: boolean
     optimizeCss: any
     locale?: string
     locales?: string[]

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "10.2.1-canary.10",
+  "version": "10.2.1",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -64,10 +64,10 @@
   "dependencies": {
     "@babel/runtime": "7.12.5",
     "@hapi/accept": "5.0.2",
-    "@next/env": "10.2.1-canary.10",
-    "@next/polyfill-module": "10.2.1-canary.10",
-    "@next/react-dev-overlay": "10.2.1-canary.10",
-    "@next/react-refresh-utils": "10.2.1-canary.10",
+    "@next/env": "10.2.1",
+    "@next/polyfill-module": "10.2.1",
+    "@next/react-dev-overlay": "10.2.1",
+    "@next/react-refresh-utils": "10.2.1",
     "@opentelemetry/api": "0.14.0",
     "assert": "2.0.0",
     "ast-types": "0.13.2",
@@ -151,7 +151,7 @@
     "@babel/preset-typescript": "7.12.7",
     "@babel/traverse": "^7.12.10",
     "@babel/types": "7.12.12",
-    "@next/polyfill-nomodule": "10.2.1-canary.10",
+    "@next/polyfill-nomodule": "10.2.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@taskr/watch": "1.1.0",

packages/react-dev-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "10.2.1-canary.10",
+  "version": "10.2.1",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",

packages/react-refresh-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "10.2.1-canary.10",
+  "version": "10.2.1",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

test/integration/create-next-app/index.test.js

@@ -97,9 +97,9 @@ describe('create next app', () => {
       const res = await run([projectName, '--typescript'], { cwd })
       expect(res.exitCode).toBe(0)
 
-      expect(
-        fs.existsSync(path.join(cwd, projectName, 'package.json'))
-      ).toBeTruthy()
+      const pkgJSONPath = path.join(cwd, projectName, 'package.json')
+
+      expect(fs.existsSync(pkgJSONPath)).toBeTruthy()
       expect(
         fs.existsSync(path.join(cwd, projectName, 'pages/index.tsx'))
       ).toBeTruthy()
@@ -119,6 +119,18 @@ describe('create next app', () => {
       expect(
         fs.existsSync(path.join(cwd, projectName, '.gitignore'))
       ).toBeTruthy()
+
+      // Assert for dependencies specific to the typescript template
+      const pkgJSON = require(pkgJSONPath)
+      expect(Object.keys(pkgJSON.dependencies)).toEqual([
+        'next',
+        'react',
+        'react-dom',
+      ])
+      expect(Object.keys(pkgJSON.devDependencies)).toEqual([
+        '@types/react',
+        'typescript',
+      ])
     })
   })
 

test/integration/font-optimization/test/index.test.js

@@ -210,15 +210,22 @@ describe('Font Optimization', () => {
 
           expect(testCss).toStrictEqual(snapshotCss)
         })
+
+        // Re-run build to check if it works when build is cached
+        it('should work when build is cached', async () => {
+          await nextBuild(appDir)
+          const testJson = JSON.parse(
+            await fs.readFile(builtPage('font-manifest.json'), {
+              encoding: 'utf-8',
+            })
+          )
+          expect(testJson.length).toBeGreaterThan(0)
+        })
       }
 
       describe('Font optimization for SSR apps', () => {
         beforeAll(async () => {
-          await fs.writeFile(
-            nextConfig,
-            `module.exports = { experimental: {optimizeFonts: true} }`,
-            'utf8'
-          )
+          await fs.writeFile(nextConfig, `module.exports = { }`, 'utf8')
 
           if (fs.pathExistsSync(join(appDir, '.next'))) {
             await fs.remove(join(appDir, '.next'))
@@ -237,7 +244,7 @@ describe('Font Optimization', () => {
         beforeAll(async () => {
           await fs.writeFile(
             nextConfig,
-            `module.exports = { target: 'serverless', experimental: {optimizeFonts: true} }`,
+            `module.exports = { target: 'serverless' }`,
             'utf8'
           )
           await nextBuild(appDir)
@@ -254,7 +261,7 @@ describe('Font Optimization', () => {
         beforeAll(async () => {
           await fs.writeFile(
             nextConfig,
-            `module.exports = { target: 'experimental-serverless-trace', experimental: {optimizeFonts: true} }`,
+            `module.exports = { target: 'experimental-serverless-trace' }`,
             'utf8'
           )
           await nextBuild(appDir)