I am working on a nextjs project where I get my styles as inline style tags under head element, but same is not working when i run build and start the server. The inline styles are now bundled in a styles.css file and is requested as a separate network call that I want to avoid.

Any clue why this could be happening:

Here is my package.json:

{
  "name": "abc",
  "description": "xyz",
  "version": "0.1.0",
  "scripts": {
    "dev": "cross-env PORTALCD=xyz ENV=dev next dev",
    "build:qa": "cross-env PORTALCD=xyz ENV=qa next build",
    "build:reg": "cross-env PORTALCD=xyz ENV=reg next build",
    "build:stg": "cross-env PORTALCD=xyz ENV=stg next build",
    "build": "cross-env PORTALCD=xyz ENV=prod next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@license-admin/sem-utilities": "1.21.0",
    "memory-cache": "^0.2.0",
    "next": "12.0.7",
    "node-sass": "^6.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "swr": "^0.5.6"
  },
  "devDependencies": {
    "critters": "^0.0.16",
    "cross-env": "^7.0.2",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "sass": "1.38.2",
    "postcss": "^8.3.6",
  }
}

I also tried the experimental flag mention in this tweet, but did not work as expected.

1. Add experimental: { optimizeCss: true } to next.config.js
2. Install critters@0.0.7 as a dependency

https://twitter.com/hdjirdeh/status/1369709676271726599/photo/1