[Next.js][babelrc] displayName옵션 사용하기

npm i babel-plugin-styled-components

설치 후 .babelrc 안에 아래와 같이 넣어줌

{
	"presets": ["next/babel"],
	"plugins": [
		[
			"babel-plugin-styled-components",
			{
				"ssr": true,
				"displayName": true,
				"preprocess": false
			}
		],
	],
	

}

"displayName": true

개발자 모드에서 Styled Components가 외계어로 보일때 displayName 옵션을 true로 설정하면 컴포넌트 이름으로 확인이 가능하다.