Merge branch 'canary' into add-good-first-issue-section-to-readme

docs/api-reference/create-next-app.md

@@ -18,7 +18,7 @@ yarn create next-app
 
 - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
 - **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
-- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. Yarn will be used by default if it's installed
+- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run `yarn create next-app`
 
 ### Why use Create Next App?
 

errors/no-sync-scripts.md

@@ -16,7 +16,7 @@ import Script from 'next/experimental-script'
 const Home = () => {
   return (
     <div class="container">
-      <Script src="https://third-party-script.js" strategy="defer"></Script>
+      <Script src="https://third-party-script.js"></Script>
       <div>Home Page</div>
     </div>
   )

packages/create-next-app/README.md

@@ -19,7 +19,7 @@ npx create-next-app blog-app
 - **--ts, --typescript** - Initialize as a TypeScript project.
 - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
 - **--example-path <path-to-example>** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
-- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. Yarn will be used by default if it's installed
+- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run `yarn create next-app`
 
 ## Why use Create Next App?
 

packages/next/build/webpack-config.ts

@@ -1260,6 +1260,7 @@ export default async function getBaseWebpackConfig(
       pageEnv: config.experimental.pageEnv,
       excludeDefaultMomentLocales: config.future.excludeDefaultMomentLocales,
       assetPrefix: config.assetPrefix,
+      disableOptimizedLoading: config.experimental.disableOptimizedLoading,
       target,
       reactProductionProfiling,
       webpack: !!config.webpack,

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

@@ -289,7 +289,13 @@ export function getUtils({
       // 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.every((val, idx) => val === defaultRouteMatches![key][idx])
+        ? value.some((val) => {
+            const defaultValue = defaultRouteMatches![key]
+
+            return Array.isArray(defaultValue)
+              ? defaultValue.includes(val)
+              : defaultValue === val
+          })
         : value === defaultRouteMatches![key]
 
       if (isDefaultValue || typeof value === 'undefined') {

packages/next/export/index.ts

@@ -369,6 +369,7 @@ export default async function exportApp(
       defaultLocale: i18n?.defaultLocale,
       domainLocales: i18n?.domains,
       trailingSlash: nextConfig.trailingSlash,
+      disableOptimizedLoading: nextConfig.experimental.disableOptimizedLoading,
     }
 
     const { serverRuntimeConfig, publicRuntimeConfig } = nextConfig
@@ -541,6 +542,8 @@ export default async function exportApp(
             optimizeFonts: nextConfig.optimizeFonts,
             optimizeImages: nextConfig.experimental.optimizeImages,
             optimizeCss: nextConfig.experimental.optimizeCss,
+            disableOptimizedLoading:
+              nextConfig.experimental.disableOptimizedLoading,
             parentSpanId: pageExportSpan.id,
           })
 

packages/next/export/worker.ts

@@ -52,6 +52,7 @@ interface ExportPageInput {
   optimizeFonts: boolean
   optimizeImages?: boolean
   optimizeCss: any
+  disableOptimizedLoading: any
   parentSpanId: any
 }
 
@@ -70,6 +71,7 @@ interface RenderOpts {
   ampSkipValidation?: boolean
   optimizeFonts?: boolean
   optimizeImages?: boolean
+  disableOptimizedLoading?: boolean
   optimizeCss?: any
   fontManifest?: FontManifest
   locales?: string[]
@@ -98,6 +100,7 @@ export default async function exportPage({
   optimizeFonts,
   optimizeImages,
   optimizeCss,
+  disableOptimizedLoading,
 }: ExportPageInput): Promise<ExportPageResults> {
   const exportPageSpan = trace('export-page-worker', parentSpanId)
 
@@ -284,6 +287,7 @@ export default async function exportPage({
               optimizeImages,
               /// @ts-ignore
               optimizeCss,
+              disableOptimizedLoading,
               distDir,
               fontManifest: optimizeFonts
                 ? requireFontManifest(distDir, serverless)
@@ -357,6 +361,7 @@ export default async function exportPage({
             optimizeFonts,
             optimizeImages,
             optimizeCss,
+            disableOptimizedLoading,
             fontManifest: optimizeFonts
               ? requireFontManifest(distDir, serverless)
               : null,

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

@@ -193,6 +193,7 @@ export type DocumentProps = DocumentInitialProps & {
   devOnlyCacheBusterQueryString: string
   scriptLoader: { afterInteractive?: string[]; beforeInteractive?: any[] }
   locale?: string
+  disableOptimizedLoading?: boolean
 }
 
 /**

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

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

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

@@ -157,6 +157,7 @@ export default class Server {
     images: string
     fontManifest: FontManifest
     optimizeImages: boolean
+    disableOptimizedLoading: boolean
     optimizeCss: any
     locale?: string
     locales?: string[]
@@ -217,6 +218,8 @@ export default class Server {
           : null,
       optimizeImages: !!this.nextConfig.experimental.optimizeImages,
       optimizeCss: this.nextConfig.experimental.optimizeCss,
+      disableOptimizedLoading: this.nextConfig.experimental
+        .disableOptimizedLoading,
       domainLocales: this.nextConfig.i18n?.domains,
       distDir: this.distDir,
     }
@@ -815,28 +818,30 @@ export default class Server {
     }
 
     // Headers come very first
-    const headers = this.customRoutes.headers.map((r) => {
-      const headerRoute = getCustomRoute(r, 'header')
-      return {
-        match: headerRoute.match,
-        has: headerRoute.has,
-        type: headerRoute.type,
-        name: `${headerRoute.type} ${headerRoute.source} header route`,
-        fn: async (_req, res, params, _parsedUrl) => {
-          const hasParams = Object.keys(params).length > 0
-
-          for (const header of (headerRoute as Header).headers) {
-            let { key, value } = header
-            if (hasParams) {
-              key = compileNonPath(key, params)
-              value = compileNonPath(value, params)
-            }
-            res.setHeader(key, value)
-          }
-          return { finished: false }
-        },
-      } as Route
-    })
+    const headers = this.minimalMode
+      ? []
+      : this.customRoutes.headers.map((r) => {
+          const headerRoute = getCustomRoute(r, 'header')
+          return {
+            match: headerRoute.match,
+            has: headerRoute.has,
+            type: headerRoute.type,
+            name: `${headerRoute.type} ${headerRoute.source} header route`,
+            fn: async (_req, res, params, _parsedUrl) => {
+              const hasParams = Object.keys(params).length > 0
+
+              for (const header of (headerRoute as Header).headers) {
+                let { key, value } = header
+                if (hasParams) {
+                  key = compileNonPath(key, params)
+                  value = compileNonPath(value, params)
+                }
+                res.setHeader(key, value)
+              }
+              return { finished: false }
+            },
+          } as Route
+        })
 
     // since initial query values are decoded by querystring.parse
     // we need to re-encode them here but still allow passing through
@@ -968,12 +973,14 @@ export default class Server {
     let afterFiles: Route[] = []
     let fallback: Route[] = []
 
-    if (Array.isArray(this.customRoutes.rewrites)) {
-      afterFiles = this.customRoutes.rewrites.map(buildRewrite)
-    } else {
-      beforeFiles = this.customRoutes.rewrites.beforeFiles.map(buildRewrite)
-      afterFiles = this.customRoutes.rewrites.afterFiles.map(buildRewrite)
-      fallback = this.customRoutes.rewrites.fallback.map(buildRewrite)
+    if (!this.minimalMode) {
+      if (Array.isArray(this.customRoutes.rewrites)) {
+        afterFiles = this.customRoutes.rewrites.map(buildRewrite)
+      } else {
+        beforeFiles = this.customRoutes.rewrites.beforeFiles.map(buildRewrite)
+        afterFiles = this.customRoutes.rewrites.afterFiles.map(buildRewrite)
+        fallback = this.customRoutes.rewrites.fallback.map(buildRewrite)
+      }
     }
 
     const catchAllRoute: Route = {

packages/next/next-server/server/render.tsx

@@ -190,6 +190,7 @@ export type RenderOptsPartial = {
   locales?: string[]
   defaultLocale?: string
   domainLocales?: DomainLocales
+  disableOptimizedLoading?: boolean
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial
@@ -234,6 +235,7 @@ function renderDocument(
     defaultLocale,
     domainLocales,
     isPreview,
+    disableOptimizedLoading,
   }: RenderOpts & {
     props: any
     docComponentsRendered: DocumentProps['docComponentsRendered']
@@ -305,6 +307,7 @@ function renderDocument(
           devOnlyCacheBusterQueryString,
           scriptLoader,
           locale,
+          disableOptimizedLoading,
           ...docProps,
         })}
       </AmpStateContext.Provider>