This is a concise guide on how to get babbel set up on NextJS so that debugging styled components is far more readable in browser inspect.
In the terminal:
yarn add -D babel-plugin-styled-components
In the terminal: touch .babelrc
Navigate to .babelrc in your file explorer and open it. Then add:
{
"presets": [
"next/babel"
],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}
When you inspect your styled-components should be far more readable when inspected in your browser!