我刚刚创建了我的NextJS应用程序，第一个加载包大小大约是1.5Mb。这是我第一次使用Nextjs，据我所知，1.2Mb是难以置信的巨大。我附上了一张Yarn构建的图片，也是我的package.json。
我的应用程序中的所有页面都是从数据库查询的，现在这些页面都呈现为静态html。
我尝试了所有基本的方法，比如使用ES6导入（用于有条件渲染的组件），但都不起作用。我相信问题在于我所有的页面都是先从数据库中获取数据（如果我错了，请纠正我），但我不太确定如何修复。
我知道我可以使用useEffect直接从前端获取数据，但是我不知道这是否会减少构建大小。
如果有人有NextJ的经验，我会非常感激他们能看看我的项目，让我知道我哪里做错了。
谢谢!
PACKAGE.JSON

"dependencies": {
    "@chakra-ui/react": "^2.3.6",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@next/bundle-analyzer": "^13.0.2",
    "dotenv": "^16.0.3",
    "framer-motion": "^7.6.5",
    "moralis-v1": "^1.11.0",
    "next": "latest",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-moralis": "^1.4.2",
    "react-redux": "^8.0.4",
    "web3uikit": "^0.1.159"
  },
  "devDependencies": {
    "@types/node": "17.0.35",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "file-loader": "^6.2.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.2",
    "typescript": "4.7.2",
    "url-loader": "^4.1.1"
  }
}

捆绑包：