diff --git a/docs/advanced-features/customizing-babel-config.md b/docs/advanced-features/customizing-babel-config.md index c0c4db96aa9bd5..c111bc22097ca5 100644 --- a/docs/advanced-features/customizing-babel-config.md +++ b/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: diff --git a/docs/basic-features/supported-browsers-features.md b/docs/basic-features/supported-browsers-features.md new file mode 100644 index 00000000000000..e223bbaf4e4ecd --- /dev/null +++ b/docs/basic-features/supported-browsers-features.md @@ -0,0 +1,47 @@ +--- +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). diff --git a/docs/faq.md b/docs/faq.md index 130f9dff79f97a..99531c979207ce 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -4,13 +4,6 @@ description: Get to know more about Next.js with the frequently asked questions. # Frequently Asked Questions -
- What browsers are supported? -

Next.js supports IE11 and all modern browsers out of the box using @babel/preset-env. In order to support IE11 Next.js adds a global Promise polyfill.

- -

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 polyfills example demonstrates the recommended approach.

-
-
Is this production ready?

Next.js has been powering https://vercel.com  since its inception.

diff --git a/docs/manifest.json b/docs/manifest.json index f325ca63db2479..4e15240a1f1476 100644 --- a/docs/manifest.json +++ b/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" } ] }, diff --git a/examples/with-polyfills/README.md b/examples/with-polyfills/README.md index 030c04626a7156..360159375bb821 100644 --- a/examples/with-polyfills/README.md +++ b/examples/with-polyfills/README.md @@ -1,8 +1,6 @@ # 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