Docs: Add supported browsers and features (#13741)

[ch1981]

Add the “Supported Browsers and Features” page. The content is taken mostly from the blog posts: [9.4](https://nextjs.org/blog/next-9-4), [9.3](https://nextjs.org/blog/next-9-3), and [9.1.7](https://nextjs.org/blog/next-9-1-7).

- This page is added under “Basic Features” on the sidebar.
- It still links to `with-polyfills` example, but [this example was updated recently](https://github.com/vercel/next.js/pull/11169/commits/04fbe0b7563d52d5feaf776cdc28b34edbb3a813). I simplified the README.
- Removed the FAQ section on supported browsers.
- On ["Customizing Babel Config"](https://nextjs.org/docs/advanced-features/customizing-babel-config), remove the list of presets which were outdated and instead link to [the preset file](https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts) so it’s always up to date.

docs/advanced-features/customizing-babel-config.md

@@ -24,15 +24,7 @@ Here's an example `.babelrc` file:
 }
 ```
 
-The `next/babel` presets includes:
-
-- preset-env
-- preset-react
-- preset-typescript
-- plugin-proposal-class-properties
-- plugin-proposal-object-rest-spread
-- plugin-transform-runtime
-- styled-jsx
+You can [take a look at this file](https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts) to learn about the presets included by `next/babel`.
 
 To configure these presets/plugins, **do not** add them to `presets` or `plugins` in your custom `.babelrc`. Instead, configure them on the `next/babel` preset, like so:
 

docs/basic-features/supported-browsers-features.md

+---
+description: Browser support and which JavaScript features are supported by Next.js.
+---
+
+# Supported Browsers and Features
+
+Next.js supports **IE11 and all modern browsers** (Edge, Firefox, Chrome, Safari, Opera, et al) with no required configuration.
+
+## Polyfills
+
+We transparently inject polyfills required for IE11 compatibility. In addition, we also inject widely used polyfills, including:
+
+- [**fetch()**](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) — Replacing: `whatwg-fetch` and `unfetch`.
+- [**URL**](https://developer.mozilla.org/en-US/docs/Web/API/URL) — Replacing: the [`url` package (Node.js API)](https://nodejs.org/api/url.html).
+- [**Object.assign()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) — Replacing: `object-assign`, `object.assign`, and `core-js/object/assign`.
+
+If any of your dependencies includes these polyfills, they’ll be eliminated automatically from the production build to avoid duplication.
+
+In addition, to reduce bundle size, Next.js will only load these polyfills for browsers that require them. The majority of the web traffic globally will not download these polyfills.
+
+### Server-side Polyfills
+
+In addition to `fetch()` on the client side, Next.js polyfills `fetch()` in the Node.js environment. You can use `fetch()` on your server code (such as `getStaticProps`) without using polyfills such as `isomorphic-unfetch` or `node-fetch`.
+
+### Custom Polyfills (Advanced)
+
+If your own code or any external npm dependencies require features not supported by your target browsers, you need to add polyfills yourself. In that case, you can take a look at the [with-polyfills](https://github.com/vercel/next.js/blob/canary/examples/with-polyfills/) example.
+
+## JavaScript Language Features
+
+Next.js allows you to use the latest JavaScript features out of the box. In addition to [ES6 features](https://github.com/lukehoban/es6features), Next.js also supports:
+
+- [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017)
+- [Object Rest/Spread Properties](https://github.com/tc39/proposal-object-rest-spread) (ES2018)
+- [Dynamic `import()`](https://github.com/tc39/proposal-dynamic-import) (ES2020)
+- [Optional Chaining](https://github.com/tc39/proposal-optional-chaining) (ES2020)
+- [Nullish Coalescing](https://github.com/tc39/proposal-nullish-coalescing) (ES2020)
+- [Class Fields](https://github.com/tc39/proposal-class-fields) and [Static Properties](https://github.com/tc39/proposal-static-class-features) (part of stage 3 proposal)
+- and more!
+
+### TypeScript Features
+
+Next.js has built-in TypeScript support. [Learn more here](/docs/basic-features/typescript.md).
+
+### Customizing Babel Config (Advanced)
+
+You can customize babel configuration. [Learn more here](/docs/advanced-features/customizing-babel-config.md).

docs/faq.md

@@ -4,13 +4,6 @@ description: Get to know more about Next.js with the frequently asked questions.
 
 # Frequently Asked Questions
 
-<details>
-  <summary>What browsers are supported?</summary>
-  <p>Next.js supports IE11 and all modern browsers out of the box using <a href="https://new.babeljs.io/docs/en/next/babel-preset-env.html">@babel/preset-env</a>. In order to support IE11 Next.js adds a global Promise polyfill.</p>
-
-  <p>In cases where your own code or any external npm dependencies you are using require features not supported by your target browsers you will need to implement polyfills. If you need to implement polyfills, the <a href="https://github.com/vercel/next.js/tree/canary/examples/with-polyfills">polyfills</a> example demonstrates the recommended approach.</p>
-</details>
-
 <details>
   <summary>Is this production ready?</summary>
   <p>Next.js has been powering <a href="https://vercel.com">https://vercel.com</a>  since its inception.</p>

docs/manifest.json

@@ -32,6 +32,10 @@
             {
               "title": "Environment Variables",
               "path": "/docs/basic-features/environment-variables.md"
+            },
+            {
+              "title": "Supported Browsers and Features",
+              "path": "/docs/basic-features/supported-browsers-features.md"
             }
           ]
         },

examples/with-polyfills/README.md

 # Example app with polyfills
 
-Next.js supports browsers from IE10 to the latest. It adds polyfills as they need. But Next.js cannot add polyfills for code inside NPM modules. So sometimes, you need to add polyfills by yourself.
-
-This how you can do it easily with Next.js's custom webpack config feature.
+Next.js supports modern browsers and IE 11. It loads required polyfills automatically. If you need to add custom polyfills, you can follow this example.
 
 ## Deploy your own