Merge branch 'canary' into enable-import-assertion

.eslintignore

@@ -26,6 +26,7 @@ packages/next-env/**/*.d.ts
 packages/create-next-app/templates/**
 test/integration/eslint/**
 test/development/basic/legacy-decorators/**/*
+test/production/emit-decorator-metadata/**/*.js
 test-timings.json
 packages/next-swc/crates/**
 bench/nested-deps/pages/**

.github/workflows/lock.yml

@@ -16,6 +16,7 @@ concurrency:
 jobs:
   action:
     runs-on: ubuntu-latest
+    if: github.repository_owner == 'vercel'
     steps:
       - uses: dessant/lock-threads@v3
         with:

.github/workflows/stale.yml

@@ -8,6 +8,7 @@ on:
 jobs:
   stale:
     runs-on: ubuntu-latest
+    if: github.repository_owner == 'vercel'
     steps:
       - uses: actions/stale@v4
         id: stale
@@ -21,4 +22,4 @@ jobs:
           days-before-pr-close: -1
           days-before-pr-stale: -1
           exempt-issue-labels: 'blocked,must,should,keep'
-          operation-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
+          operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close

contributing.md

@@ -4,6 +4,8 @@ Read about our [Commitment to Open Source](https://vercel.com/oss). To
 contribute to [our examples](examples), please see **[Adding
 examples](#adding-examples)** below.
 
+Before jumping into a PR be sure to search [existing PRs](https://github.com/vercel/next.js/pulls) or [issues](https://github.com/vercel/next.js/issues) for an open or closed item that relates to your submission.
+
 ## Developing
 
 The development branch is `canary`. This is the branch that all pull

docs/advanced-features/custom-server.md

@@ -36,18 +36,24 @@ const app = next({ dev, hostname, port })
 const handle = app.getRequestHandler()
 
 app.prepare().then(() => {
-  createServer((req, res) => {
-    // Be sure to pass `true` as the second argument to `url.parse`.
-    // This tells it to parse the query portion of the URL.
-    const parsedUrl = parse(req.url, true)
-    const { pathname, query } = parsedUrl
-
-    if (pathname === '/a') {
-      app.render(req, res, '/a', query)
-    } else if (pathname === '/b') {
-      app.render(req, res, '/b', query)
-    } else {
-      handle(req, res, parsedUrl)
+  createServer(async (req, res) => {
+    try {
+      // Be sure to pass `true` as the second argument to `url.parse`.
+      // This tells it to parse the query portion of the URL.
+      const parsedUrl = parse(req.url, true)
+      const { pathname, query } = parsedUrl
+
+      if (pathname === '/a') {
+        await app.render(req, res, '/a', query)
+      } else if (pathname === '/b') {
+        await app.render(req, res, '/b', query)
+      } else {
+        await handle(req, res, parsedUrl)
+      }
+    } catch (err) {
+      console.error('Error occurred handling', req.url, err)
+      res.statusCode = 500
+      res.end('internal server error')
     }
   }).listen(port, (err) => {
     if (err) throw err

docs/advanced-features/debugging.md

@@ -52,7 +52,7 @@ Now go to the Debug panel (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> on Wind
 
 ### Client-side code
 
-Start your development server as usual by running `next dev`, `npm run dev`, or `yarn dev`. Once the server starts, open `http://localhost:3000` (or your alternate URL) in Chrome. Next, open Chrome's Developer Tools (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd> on Windows/Linux, <kbd>⌥</kbd>+<kbd>⌘</kbd>+<kbd>I</kbd> on macOS), then go to the **Sources** tab
+Start your development server as usual by running `next dev`, `npm run dev`, or `yarn dev`. Once the server starts, open `http://localhost:3000` (or your alternate URL) in Chrome. Next, open Chrome's Developer Tools (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd> on Windows/Linux, <kbd>⌥</kbd>+<kbd>⌘</kbd>+<kbd>I</kbd> on macOS), then go to the **Sources** tab.
 
 Now, any time your client-side code reaches a [`debugger`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statement, code execution will pause and that file will appear in the debug area. You can also press <kbd>Ctrl</kbd>+<kbd>P</kbd> on Windows/Linux or <kbd>⌘</kbd>+<kbd>P</kbd> on macOS to search for a file and set breakpoints manually. Note that when searching here, your source files will have paths starting with `webpack://_N_E/./`.
 

docs/advanced-features/i18n-routing.md

@@ -170,14 +170,23 @@ import { NextRequest, NextResponse } from 'next/server'
 
 const PUBLIC_FILE = /\.(.*)$/
 
+const stripDefaultLocale = (str: string): string => {
+  const stripped = str.replace('/default', '')
+  return stripped
+}
+
 export function middleware(request: NextRequest) {
   const shouldHandleLocale =
     !PUBLIC_FILE.test(request.nextUrl.pathname) &&
     !request.nextUrl.pathname.includes('/api/') &&
     request.nextUrl.locale === 'default'
 
   return shouldHandleLocale
-    ? NextResponse.redirect(`/en${request.nextUrl.href}`)
+    ? NextResponse.redirect(
+        `/en${stripDefaultLocale(request.nextUrl.pathname)}${
+          request.nextUrl.search
+        }`
+      )
     : undefined
 }
 ```

docs/api-reference/next.config.js/introduction.md

@@ -48,6 +48,20 @@ module.exports = (phase, { defaultConfig }) => {
 }
 ```
 
+Since Next.js 12.0.10, you can use an async function:
+
+```js
+module.exports = async (phase, { defaultConfig }) => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    /* config options here */
+  }
+  return nextConfig
+}
+```
+
 `phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/constants.ts#L1-L5). Phases can be imported from `next/constants`:
 
 ```js

docs/basic-features/data-fetching/client-side.md

@@ -30,7 +30,7 @@ function Profile() {
   }, [])
 
   if (isLoading) return <p>Loading...</p>
-  if (!profileData) return <p>No profile data</p>
+  if (!data) return <p>No profile data</p>
 
   return (
     <div>

docs/basic-features/data-fetching/get-server-side-props.md

@@ -19,7 +19,7 @@ export async function getServerSideProps(context) {
 `getServerSideProps` only runs on server-side and never runs on the browser. If a page uses `getServerSideProps`, then:
 
 - When you request this page directly, `getServerSideProps` runs at request time, and this page will be pre-rendered with the returned props
-- When you request this page on client-side page transitions through [`next/link`](/docs/api-reference/next/link.md) or [`next/router`](/docs/api-reference/next/router.md), Next.js sends an API request to the server, which runs `getServerSideProps`.
+- When you request this page on client-side page transitions through [`next/link`](/docs/api-reference/next/link.md) or [`next/router`](/docs/api-reference/next/router.md), Next.js sends an API request to the server, which runs `getServerSideProps`
 
 It then returns `JSON` that contains the result of running `getServerSideProps`, that `JSON` will be used to render the page. All this work will be handled automatically by Next.js, so you don’t need to do anything extra as long as you have `getServerSideProps` defined.
 

docs/basic-features/data-fetching/get-static-props.md

@@ -84,7 +84,7 @@ When a page with `getStaticProps` is pre-rendered at build time, in addition to
 
 This JSON file will be used in client-side routing through [`next/link`](/docs/api-reference/next/link.md) or [`next/router`](/docs/api-reference/next/router.md). When you navigate to a page that’s pre-rendered using `getStaticProps`, Next.js fetches this JSON file (pre-computed at build time) and uses it as the props for the page component. This means that client-side page transitions will **not** call `getStaticProps` as only the exported JSON is used.
 
-When using Incremental Static Generation `getStaticProps` will be executed out of band to generate the JSON needed for client-side navigation. You may see this in the form of multiple requests being made for the same page, however, this is intended and has no impact on end-user performance
+When using Incremental Static Generation, `getStaticProps` will be executed in the background to generate the JSON needed for client-side navigation. You may see this in the form of multiple requests being made for the same page, however, this is intended and has no impact on end-user performance.
 
 ## Where can I use getStaticProps
 

docs/basic-features/environment-variables.md

@@ -149,3 +149,29 @@ export default async () => {
   loadEnvConfig(projectDir)
 }
 ```
+
+## Environment Variable Load Order
+
+Depending on the environment (as set by `NODE_ENV`), variables are loaded from the following sources in order from top-to-bottom. In all environments existing env is not overridden by following sources.
+
+`NODE_ENV=production`
+
+- `.env.production.local`
+- `.env.local`
+- `.env.production`
+- `.env`
+
+`NODE_ENV=development`
+
+- `.env.development.local`
+- `.env.local`
+- `.env.development`
+- `.env`
+
+`NODE_ENV=test`
+
+- `.env.test.local`
+- `.env.test`
+- `.env`
+
+_(note: `.env.local` is not loaded when `NODE_ENV=test`)_

docs/basic-features/image-optimization.md

@@ -15,8 +15,8 @@ The Next.js Image component, [`next/image`](/docs/api-reference/next/image.md),
 
 Some of the optimizations built into the Image component include:
 
-- **Improved Performance:** Always serve correctly sized image for each device, using modern image formats.
-- **Visual Stability:** Prevent [Cumulative Layout Shift](https://nextjs.org/learn/seo/web-performance/cls) automatically.
+- **Improved Performance:** Always serve correctly sized image for each device, using modern image formats
+- **Visual Stability:** Prevent [Cumulative Layout Shift](https://nextjs.org/learn/seo/web-performance/cls) automatically
 - **Faster Page Loads:** Images are only loaded when they enter the viewport, with optional blur-up placeholders
 - **Asset Flexibility:** On-demand image resizing, even for images stored on remote servers
 

docs/getting-started.md

@@ -37,11 +37,11 @@ yarn create next-app --typescript
 
 After the installation is complete:
 
-- Run `npm run dev` or `yarn dev` to start the development server on `http://localhost:3000`.
-- Visit `http://localhost:3000` to view your application.
-- Edit `pages/index.js` and see the updated result in your browser.
+- Run `npm run dev` or `yarn dev` to start the development server on `http://localhost:3000`
+- Visit `http://localhost:3000` to view your application
+- Edit `pages/index.js` and see the updated result in your browser
 
-For more information on how to use `create-next-app`, you can review the [`create-next-app` documentation](/docs/api-reference/create-next-app.md)
+For more information on how to use `create-next-app`, you can review the [`create-next-app` documentation](/docs/api-reference/create-next-app.md).
 
 ## Manual Setup