From 7d9b331775827c769371f9e8a9133ffa83c23856 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 4 Jun 2020 12:49:37 -0400 Subject: [PATCH] docs: adjust custom polyfill suggestion (#13766) The current [with-polyfills](https://github.com/vercel/next.js/blob/canary/examples/with-polyfills/) example is not the suggested way to add polyfills and is known to cause issues with bundling. The proper way to load polyfills is to include them as the first line in `pages/_app.js`, which I've updated the docs to say. --- docs/basic-features/supported-browsers-features.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/basic-features/supported-browsers-features.md b/docs/basic-features/supported-browsers-features.md index e223bbaf4e4ec..e073c9433608f 100644 --- a/docs/basic-features/supported-browsers-features.md +++ b/docs/basic-features/supported-browsers-features.md @@ -18,13 +18,15 @@ If any of your dependencies includes these polyfills, they’ll be eliminated au 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 +### 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) +### Custom Polyfills -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. +If your own code or any external npm dependencies require features not supported by your target browsers, 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 ``](docs/advanced-features/custom-app.md) or the individual component. ## JavaScript Language Features