🐵
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
きちんとコンポーネントの名前が出ています。
Discussion