随着前端技术的不断发展，新的 API 和语法不断涌现，但是在低版本浏览器上可能不支持这些新特性。为了解决这个问题，我们需要使用 polyfill。
什么是 polyfill
Polyfill 是一种 JavaScript 代码，用于在浏览器中模拟不存在的原生 API 或语言特性。比如 ES6 的 Promise。
为什么需要 polyfill
随着前端技术的不断发展，新的 API 和语法不断涌现，但是在低版本浏览器上可能不支持这些新特性。这时候使用 polyfill 可以让这些新特性在低版本浏览器上得到支持。
在 Next.js 中使用 polyfill 有两种方式，分别是：
1. 使用 polyfill.io
在 head 标签中添加如下代码：
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
polyfill.io 会自动检测浏览器对哪些特性的支持不够，然后给浏览器注入所需的 polyfill 代码。这种方法比较简单便捷，但是需要联网，可能会影响网页性能。
2. 手动引入 polyfill
在 Next.js 中手动引入 polyfill 的具体步骤如下：
1. 安装 polyfill
npm install --save @babel/polyfill
2. 引入 polyfill
在 pages/_app.js 中添加如下代码：
import '@babel/polyfill';
这里使用了 @babel/polyfill，它是 babel 提供的 polyfill 库，它可以模拟很多新特性，兼容 IE8 及以上版本的浏览器。
3. 配置 babel
在项目根目录下添加 .babelrc 文件，内容如下：
{
"presets": [
["next/babel", { "useBuiltIns": "usage", "corejs": 3 }]
],
"plugins": []
}这里的 useBuiltIns: 'usage' 会根据代码中实际使用的新特性自动添加相应的 polyfill，而不是像以往那样一次性全部引入。这样可以减少代码冗余，提高性能。
示例代码
这里是一个示例代码，演示如何在 Next.js 中使用 polyfill：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
----- ------------------- -
-- --------------- -
----- -----------------------
-
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------------------
-
-------- -
------ ---------- ------------
-
-
------ ------- ----这里使用了 fetch API，如果低版本浏览器不支持 fetch，则自动引入 whatwg-fetch 的 polyfill 代码，确保这段代码可以在低版本浏览器上正常运行。
总结
本文介绍了在 Next.js 中使用 polyfill 的两种方式，并演示了一个使用 fetch API 的示例代码，希望对您有所帮助。在实际开发中，根据代码实际需要选择相应的 polyfill 库，并进行配置，保证代码在浏览器上的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c76a0968c7c53b0ed713a