title: I can't use new feature ES 2020 in my next.js app
body: <p>I wanted to use a new feature of ES 2020 in my next.js so I used optional changes in my app. When I ran my code this error has occurred </p>
  
  <pre><code>Module parse failed: Unexpected token (50:191)
  You may need an appropriate loader to handle this file type.
  </code></pre>
  
  <p>Then I ran this command</p>
  
  <pre><code>npm install --save-dev @babel/plugin-proposal-optional-chaining
  </code></pre>
  
  <p>but the problem still exists.
  Then I decided to update babel/core to version 7, I updated it via this command</p>
  
  <pre><code>npx babel-upgrade --write
  </code></pre>
  
  <p>but the loader error still there and I don't have any idea. Here is my package.json file:</p>
  
  <pre><code>{
      "name": "Karan",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
          "dev": "SET NODE_ENV=development &amp;&amp; SET PORT=3001 &amp;&amp; node server.js",
          "build": "next build",
          "prod-build": "next build",
          "start": "SET NODE_ENV=production &amp;&amp; SET PORT=8080 &amp;&amp; node server.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
          "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
          "@ckeditor/ckeditor5-build-classic": "^12.4.0",
          "@ckeditor/ckeditor5-font": "^11.2.2",
          "@ckeditor/ckeditor5-paragraph": "^11.0.5",
          "@ckeditor/ckeditor5-react": "^1.1.3",
          "@fullpage/react-fullpage": "^0.1.17",
          "@sentry/browser": "^4.6.6",
          "@svgr/webpack": "^4.3.2",
          "@zeit/next-css": "^1.0.1",
          "@zeit/next-stylus": "^1.0.1",
          "axios": "^0.18.1",
          "express": "^4.17.1",
          "global": "^4.4.0",
          "jalaali-js": "^1.1.0",
          "leaflet": "^1.5.1",
          "moment-jalaali": "^0.8.3",
          "moment-jalali": "^0.3.9",
          "next": "^8.1.0",
          "next-images": "^1.1.2",
          "next-routes": "^1.4.2",
          "npm": "^6.12.1",
          "numeral": "^2.0.6",
          "persianjs": "^0.4.0",
          "pm2": "^3.5.1",
          "prop-types": "^15.6.2",
          "qs": "^6.8.0",
          "react": "^16.9.0",
          "react-bootstrap-star-rating": "^3.5.5-alpha.0.3",
          "react-dom": "^16.9.0",
          "react-leaflet": "^2.4.0",
          "react-modal": "^3.9.1",
          "react-paginate": "^5.2.4",
          "react-persian-calendar": "^1.0.3",
          "react-rating": "^2.0.4",
          "react-redux": "^5.0.7",
          "react-responsive": "^5.0.0",
          "react-select": "^2.4.4",
          "react-share": "^2.4.0",
          "react-slick": "^0.23.1",
          "react-star-ratings": "^2.3.0",
          "react-toastify": "^4.3.0",
          "redux": "^4.0.4",
          "redux-devtools-extension": "^2.13.5",
          "redux-logger": "^3.0.6",
          "redux-thunk": "^2.3.0",
          "stylus": "^0.54.5"
      },
      "devDependencies": {
          "@babel/core": "^7.0.0",
          "@babel/plugin-proposal-optional-chaining": "^7.9.0",
          "cross-env": "^5.2.1",
          "optimize-css-assets-webpack-plugin": "^5.0.3",
          "poststylus": "^1.0.0"
      }
  }
  </code></pre>