customized postcss plugins not loaded in nextjs

Question

I installed two additional plugins in my next.js project - postcss-import and postcss-nested. I added it to postcss.config.js, but the plugins do not work. What am I missing?

package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "17.0.21",
    "@types/react": "17.0.40",
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "postcss": "^8.4.8",
    "postcss-import": "^14.0.2",
    "postcss-nested": "^5.0.6",
    "typescript": "4.6.2"
  }
}

postcss.config.js:

module.exports = {
    plugins: [
      'postcss-import',
      'postcss-nested',]
  
  }

next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig