What is the correct way to support older browsers in Next.js applications?

[parksb]

Summary

Hello. I created an application with Next.js 16 and tested whether polyfills work properly in older browsers. I understood that Next.js injects polyfill scripts according to the browserslist in package.json, and I expected all features to work normally in Chrome 64 and above when specifying the browserslist as shown below.

"browserslist": [
  "chrome 64",
  "safari 12"
],

I tested my polyfill features page (repository, live) on BrowserStack using Chrome versions 64 and 90. And I got the following results.

expected result

The polyfill script injected by Next.js does not load

It appears that the <script src="/_next/static/chunks/<hash>.js" nomodule=""></script> tag that Next.js inserts in the HTML head tag is the polyfill script, but the script did not actually load in either Chrome 64 or 90. Since the script tag has the "nomodule" attribute, it seems that the script not loading from Chrome 61 onwards (which supports ESM) is the normal behavior. Does this mean we cannot expect polyfills in Chrome 64?

A "globalThis is not defined" error occurs in Chrome 64

In Chrome version 64, a "globalThis is not defined" error occurred. This seems to be because globalThis has been supported since Chrome 71. Is there a way to polyfill it?

actual result in Chrome 64

Some features do not work in Chrome 90

In Chrome version 90, features that should have succeeded if polyfilled failed. However, some features like Array.at (supported in Chrome 92) and Object.hasOwn (supported in Chrome 93) worked as expected.

actual result in Chrome 90

The above issue was reproduced in a Next.js 15 application as well. What is the correct way to support older browsers when building Next.js applications? Is specifying browserslist not an appropriate way?

Additional information

No response

Example

https://github.com/parksb/vercel-nextjs-issue