Add hashed className in Next.js

※ if my understanding is incorrect, please tell me!

next.jsでstyled-componentsでスタイルを適用するときランダムなハッシュ値が利用されたclassNameの前にコンポーネントの名前が表示されます。

😸 期待したクラス名

<nav class="sc-10dfd8-0">

😹 現在のクラス名

<nav class="styled__StyleMenu-sc-10dfd8-0">

.babelrcにきちんと設定されていると思っていましたが、追加オプションを設定していただく必要がありました。

babel.rc 設定

{
    "presets": ["next/babel"],
    "plugins": [
        [
            "styled-components",
            {
                "ssr": true,
                "displayName": false, // Add Style Information to className
                "pure": true // Remove unused properties
            }
        ]
    ]
}

develop modeでは自動的にtrueが設定されますので、テストでVercelに配布してみました。

Before

After

きちんとコンポーネントの名前が出ています。