背景
近年来，在项目开发中使用前端框架已成为了一种趋势，Next.js 是一个基于 React 的框架，具有多种优秀的特性，例如自动代码分割，服务器端渲染以及静态导出等等。但是在一些特殊的场景下，例如在 Internet Explorer 11 中，会出现白屏的问题，这对于一些用户而言，会造成极度不便。
解决方法
1. Babel 配置
因为 IE11 的兼容性较差，需要在 Next.js 项目中添加 Babel 的 Polyfill。首先，在 Next.js 项目中安装 @babel/polyfill 库：
npm install --save @babel/polyfill
接下来，在项目的 babel.config.js 文件中添加以下的内容：
-- -------------------- ---- -------
-------------- - -
-------- -
---------------
-
--------------------
-
------------ --------
------- ------
-------- -
--- ----
-
-
-
--
-- ----- ------- --
-上面的代码中，使用了 useBuiltIns: "usage"，这个选项是根据代码中使用到的 Polyfill 根据 browserslist 来进行按需加载。
2. 配置 Postcss
同样地，要解决 IE11 兼容性的问题，还需要在项目中添加 Postcss 的 Polyfill。需要在 Next.js 项目中新增 Postcss 的配置文件 postcss.config.js，并在其中添加以下的内容：
-- -------------------- ---- -------
-------------- - -
-------- -
-------------------------------
------ --
------------- -
-------- ----------
--------------------- --- ---- ----- - ---------- --- ----
--
--------- -
---------------- ----
-
--
-
-在上述代码中，配置了 overrideBrowserslist: ['> 1%', 'last 2 versions', 'IE 11']，代表要兼容的浏览器包括 IE 11。
3. 配置环境变量
为了保证代码能够正确地运行，在 Next.js 项目中还需要配置环境变量，添加以下的配置：
// .env BROWSER=none
这个配置是禁止在构建时打开浏览器，这在某些环境下会导致出现问题。
4. 配置 Webpack
最后，在 Next.js 项目中配置 Webpack，添加以下的配置：
module.exports = {
// Other configs
target: "node",
optimization: {
minimize: false
},
// Other configs
}在上述代码中，target: "node" 表示当前项目是运行在 Node 环境上的，而 IE11 的兼容性问题主要集中在浏览器端，所以这里使用 target: "node" 进行限制。
示例代码
对应的示例代码如下：
-- -------------------- ---- -------
-- ---------------
-------------- - -
-------- -
---------------
-
--------------------
-
------------ --------
------- ------
-------- -
--- ----
-
-
-
-
-
-- -----------------
-------------- - -
-------- -
-------------------------------
------ --
------------- -
-------- ----------
--------------------- --- ---- ----- - ---------- --- ----
--
--------- -
---------------- ----
-
--
-
-
-- ----
------------
-- --------------
-------------- - -
------- -------
------------- -
--------- -----
-
-总结
在某些场景下，例如在 IE11 环境下的 Next.js 项目，会出现白屏的问题。为了解决这个问题，需要对 Next.js 项目进行一系列的配置，包括 Babel 配置、Postcss 配置、环境变量配置、Webpack 配置等等。虽然这个过程较为繁琐，但是可以帮助我们解决问题，提高项目的兼容性，在某些场景下，可以给用户提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651cd1f095b1f8cacd452274