Merge branch 'canary' into examples/with-chakra-ui-typescript

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

@@ -157,19 +157,19 @@ module.exports = {
         headers: [
           {
             key: 'x-hello',
-            value: 'world'
-          }
-        ]
+            value: 'world',
+          },
+        ],
       },
       {
         source: '/without-basePath', // is not modified since basePath: false is set
         headers: [
           {
             key: 'x-hello',
-            value: 'world'
-          }
-        ]
-        basePath: false
+            value: 'world',
+          },
+        ],
+        basePath: false,
       },
     ]
   },

docs/basic-features/data-fetching.md

@@ -543,6 +543,7 @@ The `context` parameter is an object containing the following keys:
 - `query`: The query string.
 - `preview`: `preview` is `true` if the page is in the preview mode and `false` otherwise. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md).
 - `previewData`: The preview data set by `setPreviewData`. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md).
+- `resolvedUrl`: A normalized version of the request URL that strips the `_next/data` prefix for client transitions and includes original query values.
 
 > **Note**: You can import modules in top-level scope for use in `getServerSideProps`.
 > Imports used in `getServerSideProps` will not be bundled for the client-side.

examples/with-react-intl/lang/en-GB.json

@@ -0,0 +1,7 @@
+{
+  "AvQcw8": "React Intl Next.js Example, in en-GB",
+  "N015Sp": "Hello, World, from the UK!",
+  "ejEGdx": "Home (British version)",
+  "fnfXnF": "An example app integrating React Intl with Next.js",
+  "g5pX+a": "About (British version)"
+}

examples/with-react-intl/lang/zh-Hans-CN.json

@@ -0,0 +1,7 @@
+{
+  "AvQcw8": " React Intl Next.js示例",
+  "N015Sp": "你好，世界！",
+  "ejEGdx": "首页",
+  "fnfXnF": "一个将React Intl与Next.js集成的示例应用程序",
+  "g5pX+a": "关于"
+}

examples/with-react-intl/lang/zh-Hant-HK.json

@@ -0,0 +1,7 @@
+{
+  "AvQcw8": "React Intl Next.js示例",
+  "N015Sp": "你好，世界！",
+  "ejEGdx": "首頁",
+  "fnfXnF": "一個將React Intl與Next.js集成的示例應用程序",
+  "g5pX+a": "關於"
+}

examples/with-react-intl/package.json

@@ -3,10 +3,12 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "cross-env NODE_ICU_DATA=node_modules/full-icu ts-node --project tsconfig.server.json server.ts",
+    "dev-no-custom-server": "next dev",
     "build": "npm run extract:i18n && npm run compile:i18n && next build && tsc -p tsconfig.server.json",
     "extract:i18n": "formatjs extract '{pages,components}/*.{js,ts,tsx}' --format simple --id-interpolation-pattern '[sha512:contenthash:base64:6]' --out-file lang/en.json",
     "compile:i18n": "formatjs compile-folder --ast --format simple lang/ compiled-lang/",
-    "start": "cross-env NODE_ENV=production NODE_ICU_DATA=node_modules/full-icu node dist/server"
+    "start": "cross-env NODE_ENV=production NODE_ICU_DATA=node_modules/full-icu node dist/server",
+    "start-no-custom-server": "next start"
   },
   "dependencies": {
     "@formatjs/cli": "^2.7.3",

examples/with-react-intl/pages/_app.tsx

@@ -5,37 +5,73 @@ import App from 'next/app';
 
 function MyApp({Component, pageProps, locale, messages}) {
   return (
-    <IntlProvider locale={locale} messages={messages}>
+    <IntlProvider locale={locale} defaultLocale="en" messages={messages}>
       <Component {...pageProps} />
     </IntlProvider>
   );
 }
 
-// We need to load and expose the translations on the request for the user's
-// locale. These will only be used in production, in dev the `defaultMessage` in
-// each message description in the source code will be used.
-const getMessages = (locale: string = 'en') => {
-  switch (locale) {
-    default:
-      return import('../compiled-lang/en.json');
-    case 'fr':
-      return import('../compiled-lang/fr.json');
+/**
+ * Get the messages and also do locale negotiation. A multi-lingual user
+ * can specify locale prefs like ['ja', 'en-GB', 'en'] which is interpreted as
+ * Japanese, then British English, then English
+ * @param locales list of requested locales
+ * @returns {[string, Promise]} A tuple containing the negotiated locale
+ * and the promise of fetching the translated messages
+ */
+function getMessages(locales: string | string[] = ['en']) {
+  if (!Array.isArray(locales)) {
+    locales = [locales];
   }
-};
+  let langBundle;
+  let locale;
+  for (let i = 0; i < locales.length && !locale; i++) {
+    locale = locales[i];
+    switch (locale) {
+      case 'fr':
+        langBundle = import('../compiled-lang/fr.json');
+        break;
+      case 'en-GB':
+        langBundle = import('../compiled-lang/en-GB.json');
+        break;
+      case 'zh-Hans-CN':
+        langBundle = import('../compiled-lang/zh-Hans-CN.json');
+        break;
+      case 'zh-Hant-HK':
+        langBundle = import('../compiled-lang/zh-Hant-HK.json');
+        break;
+      default:
+        break;
+      // Add more languages
+    }
+  }
+  if (!langBundle) {
+    return ['en', import('../compiled-lang/en.json')];
+  }
+  return [locale, langBundle];
+}
 
 const getInitialProps: typeof App.getInitialProps = async appContext => {
   const {
     ctx: {req},
   } = appContext;
-  const locale = (req as any)?.locale || (window as any).LOCALE || 'en';
+  const requestedLocales: string | string[] =
+    (req as any)?.locale ||
+    (typeof navigator !== 'undefined' && navigator.languages) ||
+    // IE11
+    (typeof navigator !== 'undefined' && (navigator as any).userLanguage) ||
+    (typeof window !== 'undefined' && (window as any).LOCALE) ||
+    'en';
+
+  const [supportedLocale, messagePromise] = getMessages(requestedLocales);
 
   const [appProps, messages] = await Promise.all([
-    polyfill(locale),
-    getMessages(locale),
+    polyfill(supportedLocale),
+    messagePromise,
     App.getInitialProps(appContext),
   ]);
 
-  return {...(appProps as any), locale, messages};
+  return {...(appProps as any), locale: supportedLocale, messages};
 };
 
 MyApp.getInitialProps = getInitialProps;

examples/with-react-intl/pages/_document.tsx

@@ -16,25 +16,33 @@ class MyDocument extends Document<Props> {
   static async getInitialProps(ctx: DocumentContext) {
     const {req} = ctx;
     const initialProps = await Document.getInitialProps(ctx);
+    const locale = (req as any).locale;
     return {
       ...initialProps,
-      locale: (req as any).locale || 'en',
-      lang: ((req as any).locale || 'en').split('-')[0],
+      locale,
+      lang: locale ? locale.split('-')[0] : undefined,
       nonce: (req as any).nonce,
     };
   }
 
   render() {
+    let scriptEl;
+    if (this.props.locale) {
+      scriptEl = (
+        <script
+          nonce={this.props.nonce}
+          dangerouslySetInnerHTML={{
+            __html: `window.LOCALE="${this.props.locale}"`,
+          }}
+        ></script>
+      );
+    }
+
     return (
       <Html lang={this.props.lang}>
         <Head />
         <body>
-          <script
-            nonce={this.props.nonce}
-            dangerouslySetInnerHTML={{
-              __html: `window.LOCALE="${this.props.locale}"`,
-            }}
-          ></script>
+          {scriptEl}
           <Main />
           <NextScript />
         </body>

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.5.4-canary.15"
+  "version": "9.5.4-canary.20"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.5.4-canary.15",
+  "version": "9.5.4-canary.20",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

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

packages/next-codemod/package.json

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

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.5.4-canary.15",
+  "version": "9.5.4-canary.20",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.5.4-canary.15",
+  "version": "9.5.4-canary.20",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-google-analytics"

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.5.4-canary.15",
+  "version": "9.5.4-canary.20",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-sentry"

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "9.5.4-canary.15",
+  "version": "9.5.4-canary.20",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@next/polyfill-module",
+  "version": "9.5.4-canary.20",
+  "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",
+  "repository": {
+    "url": "vercel/next.js",
+    "directory": "packages/next-polyfill-module"
+  },
+  "scripts": {
+    "prepublish": "microbundle src/index.js -f iife --no-sourcemap --external none",
+    "build": "microbundle watch src/index.js -f iife --no-sourcemap --external none"
+  },
+  "devDependencies": {
+    "microbundle": "0.11.0"
+  }
+}

packages/next-polyfill-module/src/index.js

@@ -0,0 +1,94 @@
+/* eslint-disable no-extend-native */
+
+// Contains polyfills for methods missing after browser version(s):
+// Edge 16, Firefox 60, Chrome 61, Safari 10.1
+
+/**
+ * Available in:
+ * Edge: never
+ * Firefox: 61
+ * Chrome: 66
+ * Safari: 12
+ *
+ * https://caniuse.com/mdn-javascript_builtins_string_trimstart
+ * https://caniuse.com/mdn-javascript_builtins_string_trimend
+ */
+if (!('trimStart' in String.prototype)) {
+  String.prototype.trimStart = String.prototype.trimLeft
+}
+if (!('trimEnd' in String.prototype)) {
+  String.prototype.trimEnd = String.prototype.trimRight
+}
+
+/**
+ * Available in:
+ * Edge: never
+ * Firefox: 63
+ * Chrome: 70
+ * Safari: 12.1
+ *
+ * https://caniuse.com/mdn-javascript_builtins_symbol_description
+ */
+if (!('description' in Symbol.prototype)) {
+  Object.defineProperty(Symbol.prototype, 'description', {
+    get: function get() {
+      return /\((.+)\)/.exec(this)[1]
+    },
+  })
+}
+
+/**
+ * Available in:
+ * Edge: never
+ * Firefox: 62
+ * Chrome: 69
+ * Safari: 12
+ *
+ * https://caniuse.com/array-flat
+ */
+// Copied from https://gist.github.com/developit/50364079cf0390a73e745e513fa912d9
+// Licensed Apache-2.0
+if (!Array.prototype.flat) {
+  Array.prototype.flat = function flat(d, c) {
+    return (
+      (c = this.concat.apply([], this)),
+      d > 1 && c.some(Array.isArray) ? c.flat(d - 1) : c
+    )
+  }
+  Array.prototype.flatMap = function (c, a) {
+    return this.map(c, a).flat()
+  }
+}
+
+/**
+ * Available in:
+ * Edge: 18
+ * Firefox: 58
+ * Chrome: 63
+ * Safari: 11.1
+ *
+ * https://caniuse.com/promise-finally
+ */
+// Modified from https://gist.github.com/developit/e96097d9b657f2a2f3e588ffde433437
+// Licensed Apache-2.0
+if (!Promise.prototype.finally) {
+  Promise.prototype.finally = function (callback) {
+    if (typeof callback !== 'function') {
+      return this.then(callback, callback)
+    }
+
+    var P = this.constructor || Promise
+    return this.then(
+      function (value) {
+        return P.resolve(callback()).then(function () {
+          return value
+        })
+      },
+      function (err) {
+        return P.resolve(callback()).then(function () {
+          throw err
+        })
+      }
+    )
+  }
+}

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "9.5.4-canary.15",
+  "version": "9.5.4-canary.20",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",