diff --git a/examples/with-polyfills/README.md b/examples/with-polyfills/README.md
index 8172660a95e7c..eb5df31a8799c 100644
--- a/examples/with-polyfills/README.md
+++ b/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
 
diff --git a/examples/with-polyfills/client/polyfills.js b/examples/with-polyfills/client/polyfills.js
deleted file mode 100644
index bce92e0823f9a..0000000000000
--- a/examples/with-polyfills/client/polyfills.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint no-extend-native: 0 */
-
-// This file runs before React and Next.js core
-// This file is loaded for all browsers
-// Next.js includes a number of polyfills only for older browsers like IE11
-// Make sure you don't duplicate these in this file
-// https://github.com/vercel/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js
-console.log('Load your polyfills')
diff --git a/examples/with-polyfills/next.config.js b/examples/with-polyfills/next.config.js
deleted file mode 100644
index 5be0529754071..0000000000000
--- a/examples/with-polyfills/next.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-module.exports = {
-  webpack: function (cfg) {
-    const originalEntry = cfg.entry
-    cfg.entry = async () => {
-      const entries = await originalEntry()
-
-      if (
-        entries['main.js'] &&
-        !entries['main.js'].includes('./client/polyfills.js')
-      ) {
-        entries['main.js'].unshift('./client/polyfills.js')
-      }
-
-      return entries
-    }
-
-    return cfg
-  },
-}
diff --git a/examples/with-polyfills/package.json b/examples/with-polyfills/package.json
index ed1512ec5b813..48413e6dc0be7 100644
--- a/examples/with-polyfills/package.json
+++ b/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"
 }
diff --git a/examples/with-polyfills/pages/_app.js b/examples/with-polyfills/pages/_app.js
new file mode 100644
index 0000000000000..c90fee1e72087
--- /dev/null
+++ b/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
diff --git a/examples/with-polyfills/pages/index.js b/examples/with-polyfills/pages/index.js
index 122596a3f59f1..8f5129010b9b0 100644
--- a/examples/with-polyfills/pages/index.js
+++ b/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>
 }