Docs/polyfills fix pages only (#82462)

icyJoseph · web-flow · commit 3552445eba3f · 2025-08-08T10:45:32.000+02:00
Follow up for: #74730
diff --git a/docs/03-architecture/supported-browsers.mdx b/docs/03-architecture/supported-browsers.mdx
@@ -43,19 +43,37 @@ In addition, to reduce bundle size, Next.js will only load these polyfills for b
 
 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.
 
-<PagesOnly>
-In this case, you should add a top-level import for the **specific polyfill** you need in your [Custom `<App>`](/docs/pages/building-your-application/routing/custom-app) or the individual component.
-</PagesOnly>
+#### In App Router
 
-<AppOnly>
- 
 To include polyfills, you can import them into the [`instrumentation-client.js` file](/docs/app/api-reference/file-conventions/instrumentation-client).
 
 ```ts filename="instrumentation-client.ts"
 import './polyfills'
 ```
 
-</AppOnly>
+#### In Pages Router
+
+In this case, you should add a top-level import for the **specific polyfill** you need in your [Custom `<App>`](/docs/pages/building-your-application/routing/custom-app) or the individual component.
+
+```tsx filename="pages/_app.tsx" switcher
+import './polyfills'
+
+import type { AppProps } from 'next/app'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+```jsx filename="pages/_app.jsx" switcher
+import './polyfills'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+#### Conditionally loading polyfills
 
 The best approach is to isolate unsupported features to specific UI sections and conditionally load the polyfill if needed.
 
