Merge branch 'canary' into fix-do-not-call-middleware-with-shallow-push

.github/workflows/build_test_deploy.yml

@@ -413,6 +413,10 @@ jobs:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
 
+      - uses: pnpm/action-setup@v2.2.1
+        with:
+          version: 6.32.2
+
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:

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

@@ -28,6 +28,7 @@ yarn create next-app --typescript
 - **-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/canary/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. To bootstrap using yarn we recommend running `yarn create next-app`
+- **--use-pnpm** - Explicitly tell the CLI to bootstrap the app using pnpm. To bootstrap using yarn we recommend running `yarn create next-app`
 
 ### Why use Create Next App?
 

examples/with-supertokens/package.json

@@ -9,7 +9,7 @@
     "next": "latest",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "supertokens-auth-react": "^0.18.0",
+    "supertokens-auth-react": "^0.19.0",
     "supertokens-node": "^9.0.0"
   }
 }

packages/create-next-app/README.md

@@ -26,6 +26,7 @@ npx create-next-app blog-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/canary/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. To bootstrap using yarn we recommend to run `yarn create next-app`
+- **--use-pnpm** - Explicitly tell the CLI to bootstrap the app using pnpm. To bootstrap using yarn we recommend running `yarn create next-app`
 
 ## Why use Create Next App?
 

packages/create-next-app/create-app.ts

@@ -18,20 +18,20 @@ import { tryGitInit } from './helpers/git'
 import { install } from './helpers/install'
 import { isFolderEmpty } from './helpers/is-folder-empty'
 import { getOnline } from './helpers/is-online'
-import { shouldUseYarn } from './helpers/should-use-yarn'
 import { isWriteable } from './helpers/is-writeable'
+import type { PackageManager } from './helpers/get-pkg-manager'
 
 export class DownloadError extends Error {}
 
 export async function createApp({
   appPath,
-  useNpm,
+  packageManager,
   example,
   examplePath,
   typescript,
 }: {
   appPath: string
-  useNpm: boolean
+  packageManager: PackageManager
   example?: string
   examplePath?: string
   typescript?: boolean
@@ -119,11 +119,10 @@ export async function createApp({
     process.exit(1)
   }
 
-  const useYarn = useNpm ? false : shouldUseYarn()
+  const useYarn = packageManager === 'yarn'
   const isOnline = !useYarn || (await getOnline())
   const originalDirectory = process.cwd()
 
-  const displayedCommand = useYarn ? 'yarn' : 'npm'
   console.log(`Creating a new Next.js app in ${chalk.green(root)}.`)
   console.log()
 
@@ -189,14 +188,14 @@ export async function createApp({
     console.log('Installing packages. This might take a couple of minutes.')
     console.log()
 
-    await install(root, null, { useYarn, isOnline })
+    await install(root, null, { packageManager, isOnline })
     console.log()
   } else {
     /**
      * Otherwise, if an example repository is not provided for cloning, proceed
      * by installing from a template.
      */
-    console.log(chalk.bold(`Using ${displayedCommand}.`))
+    console.log(chalk.bold(`Using ${packageManager}.`))
     /**
      * Create a package.json for the new project.
      */
@@ -221,7 +220,7 @@ export async function createApp({
     /**
      * These flags will be passed to `install()`.
      */
-    const installFlags = { useYarn, isOnline }
+    const installFlags = { packageManager, isOnline }
     /**
      * Default dependencies.
      */
@@ -309,20 +308,20 @@ export async function createApp({
   console.log(`${chalk.green('Success!')} Created ${appName} at ${appPath}`)
   console.log('Inside that directory, you can run several commands:')
   console.log()
-  console.log(chalk.cyan(`  ${displayedCommand} ${useYarn ? '' : 'run '}dev`))
+  console.log(chalk.cyan(`  ${packageManager} ${useYarn ? '' : 'run '}dev`))
   console.log('    Starts the development server.')
   console.log()
-  console.log(chalk.cyan(`  ${displayedCommand} ${useYarn ? '' : 'run '}build`))
+  console.log(chalk.cyan(`  ${packageManager} ${useYarn ? '' : 'run '}build`))
   console.log('    Builds the app for production.')
   console.log()
-  console.log(chalk.cyan(`  ${displayedCommand} start`))
+  console.log(chalk.cyan(`  ${packageManager} start`))
   console.log('    Runs the built app in production mode.')
   console.log()
   console.log('We suggest that you begin by typing:')
   console.log()
   console.log(chalk.cyan('  cd'), cdpath)
   console.log(
-    `  ${chalk.cyan(`${displayedCommand} ${useYarn ? '' : 'run '}dev`)}`
+    `  ${chalk.cyan(`${packageManager} ${useYarn ? '' : 'run '}dev`)}`
   )
   console.log()
 }

packages/create-next-app/helpers/get-pkg-manager.ts

@@ -0,0 +1,25 @@
+import { execSync } from 'child_process'
+
+export type PackageManager = 'npm' | 'pnpm' | 'yarn'
+
+export function getPkgManager(): PackageManager {
+  try {
+    const userAgent = process.env.npm_config_user_agent
+    if (userAgent) {
+      if (userAgent.startsWith('yarn')) {
+        return 'yarn'
+      } else if (userAgent.startsWith('pnpm')) {
+        return 'pnpm'
+      }
+    }
+    try {
+      execSync('yarn --version', { stdio: 'ignore' })
+      return 'yarn'
+    } catch {
+      execSync('pnpm --version', { stdio: 'ignore' })
+      return 'pnpm'
+    }
+  } catch {
+    return 'npm'
+  }
+}

packages/create-next-app/helpers/install.ts

@@ -1,12 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import chalk from 'chalk'
 import spawn from 'cross-spawn'
+import type { PackageManager } from './get-pkg-manager'
 
 interface InstallArgs {
   /**
-   * Indicate whether to install packages using Yarn.
+   * Indicate whether to install packages using npm, pnpm or Yarn.
    */
-  useYarn: boolean
+  packageManager: PackageManager
   /**
    * Indicate whether there is an active Internet connection.
    */
@@ -25,10 +26,10 @@ interface InstallArgs {
 export function install(
   root: string,
   dependencies: string[] | null,
-  { useYarn, isOnline, devDependencies }: InstallArgs
+  { packageManager, isOnline, devDependencies }: InstallArgs
 ): Promise<void> {
   /**
-   * NPM-specific command-line flags.
+   * (p)npm-specific command-line flags.
    */
   const npmFlags: string[] = []
   /**
@@ -40,11 +41,12 @@ export function install(
    */
   return new Promise((resolve, reject) => {
     let args: string[]
-    let command: string = useYarn ? 'yarnpkg' : 'npm'
+    let command = packageManager
+    const useYarn = packageManager === 'yarn'
 
     if (dependencies && dependencies.length) {
       /**
-       * If there are dependencies, run a variation of `{displayCommand} add`.
+       * If there are dependencies, run a variation of `{packageManager} add`.
        */
       if (useYarn) {
         /**
@@ -57,15 +59,15 @@ export function install(
         args.push(...dependencies)
       } else {
         /**
-         * Call `npm install [--save|--save-dev] ...`.
+         * Call `(p)npm install [--save|--save-dev] ...`.
          */
         args = ['install', '--save-exact']
         args.push(devDependencies ? '--save-dev' : '--save')
         args.push(...dependencies)
       }
     } else {
       /**
-       * If there are no dependencies, run a variation of `{displayCommand}
+       * If there are no dependencies, run a variation of `{packageManager}
        * install`.
        */
       args = ['install']

packages/create-next-app/index.ts

@@ -6,7 +6,7 @@ import path from 'path'
 import prompts from 'prompts'
 import checkForUpdate from 'update-check'
 import { createApp, DownloadError } from './create-app'
-import { shouldUseYarn } from './helpers/should-use-yarn'
+import { getPkgManager } from './helpers/get-pkg-manager'
 import { validateNpmName } from './helpers/validate-pkg'
 import packageJson from './package.json'
 
@@ -31,6 +31,13 @@ const program = new Commander.Command(packageJson.name)
     `
 
   Explicitly tell the CLI to bootstrap the app using npm
+`
+  )
+  .option(
+    '--use-pnpm',
+    `
+
+  Explicitly tell the CLI to bootstrap the app using pnpm
 `
   )
   .option(
@@ -116,14 +123,19 @@ async function run(): Promise<void> {
       'Please provide an example name or url, otherwise remove the example option.'
     )
     process.exit(1)
-    return
   }
 
+  const packageManager = !!program.useNpm
+    ? 'npm'
+    : !!program.usePnpm
+    ? 'pnpm'
+    : 'yarn'
+
   const example = typeof program.example === 'string' && program.example.trim()
   try {
     await createApp({
       appPath: resolvedProjectPath,
-      useNpm: !!program.useNpm,
+      packageManager,
       example: example && example !== 'default' ? example : undefined,
       examplePath: program.examplePath,
       typescript: program.typescript,
@@ -147,7 +159,7 @@ async function run(): Promise<void> {
 
     await createApp({
       appPath: resolvedProjectPath,
-      useNpm: !!program.useNpm,
+      packageManager,
       typescript: program.typescript,
     })
   }
@@ -159,7 +171,7 @@ async function notifyUpdate(): Promise<void> {
   try {
     const res = await update
     if (res?.latest) {
-      const isYarn = shouldUseYarn()
+      const pkgManager = getPkgManager()
 
       console.log()
       console.log(
@@ -168,9 +180,9 @@ async function notifyUpdate(): Promise<void> {
       console.log(
         'You can update by running: ' +
           chalk.cyan(
-            isYarn
+            pkgManager === 'yarn'
               ? 'yarn global add create-next-app'
-              : 'npm i -g create-next-app'
+              : `${pkgManager} install --global create-next-app`
           )
       )
       console.log()

packages/next-env/index.ts

@@ -2,7 +2,7 @@
 import * as fs from 'fs'
 import * as path from 'path'
 import * as dotenv from 'dotenv'
-import dotenvExpand from 'dotenv-expand'
+import { expand as dotenvExpand } from 'dotenv-expand'
 
 export type Env = { [key: string]: string }
 export type LoadedEnvFiles = Array<{

packages/next-env/package.json

@@ -31,6 +31,6 @@
   "devDependencies": {
     "@vercel/ncc": "0.33.1",
     "dotenv": "10.0.0",
-    "dotenv-expand": "5.1.0"
+    "dotenv-expand": "8.0.1"
   }
 }

packages/next/server/base-server.ts

@@ -980,12 +980,12 @@ export default abstract class Server {
       query: NextParsedUrlQuery
     }
   ): Promise<void> {
-    const userAgent = partialContext.req.headers['user-agent']
+    const isBotRequest = isBot(partialContext.req.headers['user-agent'] || '')
     const ctx = {
       ...partialContext,
       renderOpts: {
         ...this.renderOpts,
-        supportsDynamicHTML: userAgent ? !isBot(userAgent) : false,
+        supportsDynamicHTML: !isBotRequest,
       },
     } as const
     const payload = await fn(ctx)
@@ -1175,11 +1175,13 @@ export default abstract class Server {
     }
 
     if (opts.supportsDynamicHTML === true) {
+      const isBotRequest = isBot(req.headers['user-agent'] || '')
       // Disable dynamic HTML in cases that we know it won't be generated,
       // so that we can continue generating a cache key when possible.
       opts.supportsDynamicHTML =
         !isSSG &&
         !isLikeServerless &&
+        !isBotRequest &&
         !query.amp &&
         typeof components.Document?.getInitialProps !== 'function'
     }

packages/next/server/next-server.ts

@@ -49,7 +49,7 @@ import { getExtension, serveStatic } from './serve-static'
 import { ParsedUrlQuery } from 'querystring'
 import { apiResolver } from './api-utils/node'
 import { RenderOpts, renderToHTML } from './render'
-import { ParsedUrl } from '../shared/lib/router/utils/parse-url'
+import { ParsedUrl, parseUrl } from '../shared/lib/router/utils/parse-url'
 import * as Log from '../build/output/log'
 
 import BaseServer, {
@@ -1131,12 +1131,8 @@ export default class NextNodeServer extends BaseServer {
           const rewritePath = result.response.headers.get(
             'x-middleware-rewrite'
           )!
-          const { newUrl, parsedDestination } = prepareDestination({
-            appendParamsToQuery: false,
-            destination: rewritePath,
-            params: _params,
-            query: {},
-          })
+          const parsedDestination = parseUrl(rewritePath)
+          const newUrl = parsedDestination.pathname
 
           // TODO: remove after next minor version current `v12.0.9`
           this.warnIfQueryParametersWereDeleted(