I'm using Next.js for Server Side Rendering of React application (with styled-ponents) and have issue with Babel plugins I'm using to show name of the ponents I'm using in code.

This is my .babelrc file:

{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": [
        [
          "babel-plugin-styled-ponents",
          {
            "ssr": true,
            "displayName": true,
            "preprocess": false
          }
        ]
      ]
    },
    "production": {
      "presets": "next/babel",
      "plugins": [
        [
          "babel-plugin-styled-ponents",
          {
            "displayName": false,
            "ssr": true
          }
        ]
      ]
    },
    "test": {
      "presets": [
        [
          "env",
          {
            "modules": "monjs"
          }
        ],
        "next/babel"
      ]
    }
  }
}

When I'm running cross-env NODE_ENV=development concurrently "tsc --watch" next

I'm getting these lines - meaning .babelrc is used during copilation:

[1] > Using external babel configuration
[1] > Location: "...../.babelrc"
[1] > Using "webpack" config function defined in next.config.js.

But once I go to dev tools and see some styled-ponent I can see this: class="sc-iyvyFf gGaJAt" but on my code I have this definition:

const Title = styled.div`
  font-size: 40px;
  line-height: 1.13;
`

As it seems from documentation example - I should get something like ... <button class="Button-asdf123 asdf123" /> instead of just <button class="asdf123" />. But I don't.

After going deeper I found this issue ( ) based on errors I get in browser console that said:

It seems that only the server code is being transpiled and not the client code