Nextjs not minified (event in production)

Question

I'm really going crazy becauase I read everywhere that nextjs minify js (and I think also SCSS/CSS) files, but it seems impossibile to me to see my file minified.

I copy here my "next.config.js" file:

const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withFonts = require('next-fonts');

const nextConfig = {
  compress: true,
  serverRuntimeConfig: {
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    nodeENV: process.env.NODE_ENV
  },

};

module.exports = withPlugins(
  [
    withSass({
      cssModules: true
    }),
    withImages,
    withFonts
  ], nextConfig
);

In my ".bash_profile" file I set NODE_ENV to production and I verified it with

echo $NOVE_ENV

this on my server/remote and also on my local machine... just to be sure.

I also add my package.json file here:

{
  "name": "docker-nextjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_PATH=. NODE_ENV=production ENV=production next build && node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@react-google-maps/api": "^1.8.6",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "axios": "^0.19.2",
    "express": "^4.17.1",
    "flatpickr": "^4.6.3",
    "gsap": "^3.2.6",
    "include-media": "^1.4.9",
    "next": "^9.3.1",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^1.0.3",
    "next-images": "^1.3.1",
    "next-routes": "^1.4.2",
    "node-sass": "^4.13.1",
    "paper": "^0.12.4",
    "react": "^16.13.1",
    "react-async-script-loader": "^0.3.0",
    "react-dom": "^16.13.1",
    "react-ga": "^2.7.0",
    "react-loadable": "^5.5.0",
    "sass": "^1.26.3",
    "simplex-noise": "^2.4.0",
    "swiper": "^5.3.6",
    "three": "^0.115.0",
    "uglifyjs-webpack-plugin": "^2.2.0"
  }
}

I'm running my site with a custom SSR server:

const express = require( 'express' );
const next    = require( 'next' );

// Import middleware.
const routes = require( './routes' );

// Setup app.
const app     = next( { dev: 'production' !== process.env.NODE_ENV } );
const handle  = app.getRequestHandler();
const handler = routes.getRequestHandler( app );
app.prepare()
  .then( () => {

    // Create server.
    const server = express();
    server.use('/static', express.static('/next'))

    // Use our handler for requests.
    server.use( handler );

    // Don't remove. Important for the server to work. Default route.
    server.get( '*', ( req, res ) => {
      return handle( req, res );
    } );

    // Get current port.
    const port = process.env.PORT || 3000;

    // Error check.
    server.listen( port, err => {
      if ( err ) {
        throw err;
      }

      // Where we starting, yo!
      console.log( `Ready on port ${port}...` );
    } );
  } );

I'm really confused....

Answer 1

Minify using below code.

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin')
webpack: (config, options) => 
{
    config.optimization.minimizer = [];
    config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
    config.optimization.minimizer.push(new TerserPlugin());
}