Estoy trabajando en un proyecto nextjs donde obtengo mis estilos como etiquetas de estilo en línea debajo del elemento principal, pero no funciona cuando ejecuto la compilación e inicio el servidor. Los estilos en línea ahora están agrupados en un archivo styles.css y se solicitan como una llamada de red separada que deseo evitar.

Cualquier pista de por qué esto podría estar sucediendo:

Aquí está mi paquete.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", } }

También probé la mención de la bandera experimental en este tweet, pero no funcionó como se esperaba.

1. Agregue experimental: { optimizeCss: true } a next.config.js
2. Instalar critters@0.0.7 como dependencia

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