Why next.js build makes serveral files in the dist directory? - next.js

Question

I'm very new to next.js.
previously, I use webpack, and make config from scratch.
webpack build make the only bundle.js in dist directory (only one bundled js file)
and I make a project with next.js from scratch.
but now I tried npm run build, It makes too many files.
with Webpack, I only need an index.html and one bundled js file,
but, now I have no idea how to use and test with this many files.
Is there any wrong with me?
.
├── build-manifest.json
├── cache
│   └── webpack
│   ├── client-development
│   │   ├── 0.pack
│   │   ├── 1.pack
│   │   ├── 10.pack
│   │   ├── 11.pack
│   │   ├── 12.pack
│   │   ├── 13.pack
│   │   ├── 14.pack
│   │   ├── 15.pack
│   │   ├── 16.pack
│   │   ├── 2.pack
│   │   ├── 3.pack
│   │   ├── 4.pack
│   │   ├── 5.pack
│   │   ├── 6.pack
│   │   ├── 7.pack
│   │   ├── 8.pack
│   │   ├── 9.pack
│   │   ├── index.pack
│   │   └── index.pack.old
│   ├── client-production
│   │   ├── 0.pack
│   │   └── index.pack
│   ├── server-development
│   │   ├── 0.pack
│   │   ├── 1.pack
│   │   ├── 10.pack
│   │   ├── 11.pack
│   │   ├── 2.pack
│   │   ├── 3.pack
│   │   ├── 4.pack
│   │   ├── 5.pack
│   │   ├── 6.pack
│   │   ├── 7.pack
│   │   ├── 8.pack
│   │   ├── 9.pack
│   │   ├── index.pack
│   │   └── index.pack.old
│   └── server-production
│   ├── 0.pack
│   └── index.pack
├── react-loadable-manifest.json
├── server
│   ├── pages
│   │   ├── _app.js
│   │   ├── _document.js
│   │   ├── _error.js
│   │   └── index.js
│   ├── pages-manifest.json
│   └── webpack-runtime.js
└── static
├── chunks
│   ├── amp.js
│   ├── main.js
│   ├── node_modules_next_dist_client_dev_noop_js.js
│   ├── pages
│   │   ├── _app.js
│   │   ├── _error.js
│   │   └── index.js
│   ├── polyfills.js
│   ├── react-refresh.js
│   └── webpack.js
├── development
│   ├── _buildManifest.js
│   └── _ssgManifest.js
└── webpack
├── 496129cd3e9c913aa9ff.webpack.hot-update.json
└── webpack.496129cd3e9c913aa9ff.hot-update.js
13 directories, 58 files
Here is my next.config.js
const path = require('path');
module.exports = {
distDir: 'dist',
webpack: function (config, options) {
config.experiments = {};
return config;
},
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
env: {
API_KEY: process.env.API_KEY,
AUTH_DOMAIN: process.env.AUTH_DOMAIN,
PROJECT_ID: process.env.PROJECT_ID,
STORAGE_BUCKET: process.env.STORAGE_BUCKET,
MESSAGING_SENDER_ID: process.env.MESSAGING_SENDER_ID,
APP_ID: process.env.APP_ID,
}
};
package.json script
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},