How to config reactjs nextjs support IE 11

Currently IE 11 has very few users, but due to the requirement of many projects that need support IE 11. I will detail how to step by step configuring support IE 11 for reactjs and nextjs.

1. Browserslist in package.json

Add ie 11 into browserslist

"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version",
        "ie 11"
    ]
}

2. Use react-app-polyfill

If you are using Create React App, you do not need to install this npm.

> npm install react-app-polyfill

Import this must be the first line in src/index.js

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

3. Support var() css

> npm install react-app-polyfill

Import and call cssVars in src/index.js

import cssVars from "css-vars-ponyfill";

cssVars();

4. Support URLSearchParams

Import this must be the first line in src/index.js

import "core-js/features/url-search-params";