b8c193bb58
This addition helps users figure out that this is the kind of expression they need to put in their `package.json`, and it provides the Next.js defaults to use as a starting point. (I was initially confused and thought the default configuration would just be "defaults".)
The list was pulled from `MODERN_BROWSERSLIST_TARGET` in [packages/next/shared/lib/constants.ts](28454c6ddb/packages/next/shared/lib/constants.ts (L56-L62)).
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
3.2 KiB
| description |
|---|
| Browser support and which JavaScript features are supported by Next.js. |
Supported Browsers and Features
Next.js supports modern browsers with zero configuration.
- Chrome 64+
- Edge 79+
- Firefox 67+
- Opera 51+
- Safari 12+
Browserslist
If you would like to target specific browsers or features, Next.js supports Browserslist configuration in your package.json file. Next.js uses the following Browserslist configuration by default:
{
"browserslist": [
"chrome 64",
"edge 79",
"firefox 67",
"opera 51",
"safari 12"
]
}
Polyfills
We inject widely used polyfills, including:
- fetch() — Replacing:
whatwg-fetchandunfetch. - URL — Replacing: the
urlpackage (Node.js API). - Object.assign() — Replacing:
object-assign,object.assign, andcore-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.
Custom Polyfills
If your own code or any external npm dependencies require features not supported by your target browsers (such as IE 11), you need to add polyfills yourself.
In this case, you should add a top-level import for the specific polyfill you need in your Custom <App> or the individual component.
JavaScript Language Features
Next.js allows you to use the latest JavaScript features out of the box. In addition to ES6 features, Next.js also supports:
- Async/await (ES2017)
- Object Rest/Spread Properties (ES2018)
- Dynamic
import()(ES2020) - Optional Chaining (ES2020)
- Nullish Coalescing (ES2020)
- Class Fields and Static Properties (part of stage 3 proposal)
- and more!
Server-Side Polyfills
In addition to fetch() on the client-side, Next.js polyfills fetch() in the Node.js environment. You can use fetch() in your server code (such as getStaticProps/getServerSideProps) without using polyfills such as isomorphic-unfetch or node-fetch.
TypeScript Features
Next.js has built-in TypeScript support. Learn more here.
Customizing Babel Config (Advanced)
You can customize babel configuration. Learn more here.