Update with-polyfills example.

examples/with-polyfills/README.md

@@ -1,8 +1,10 @@
-# Example app with polyfills
+# With Polyfills
 
-> ❗️ Warning: This example is not the suggested way to add polyfills and is known to cause issues with bundling. See [the browser support docs](https://nextjs.org/docs/basic-features/supported-browsers-features#custom-polyfills) for the correct way to load polyfills.
+Next.js supports IE11 and all modern browsers (Edge, Firefox, Chrome, Safari, Opera, et al) with no required configuration. It also adds [some polyfills](https://nextjs.org/docs/basic-features/supported-browsers-features#polyfills) by default.
 
-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.
+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 `<App>` or the individual component.
 
 ## Deploy your own
 

examples/with-polyfills/package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "latest",
+    "react-dom": "latest"
   },
   "license": "MIT"
 }

examples/with-polyfills/pages/_app.js

@@ -0,0 +1,9 @@
+// Add your polyfills here or at the component level.
+// For example...
+// import 'resize-observer-polyfill'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-polyfills/pages/index.js

@@ -1,5 +1,3 @@
-console.log('Inside the /index.js page')
-
 export default function Home() {
   return <div>Hello World</div>
 }