기술
[Next.js + TypeScript] emotion 적용 방법
기먕로기
2023. 1. 19. 16:00
emotion
css-in-js 라이브러리이다.
create next app
typescript 기반의 next app을 만든다.
yarn create next-app ${my-app} --typescript
install emotion
my-app에서 emotion을 설치한다.
yarn add @emotion/react @emotion/styled
babel config (optional)
emotion의 여러 기능을 사용하기 위해 바벨 설정을 한다.
emotion 8 버전 이상부터는 필요하지 않다고 하니 참고하시길 바란다.
아래 커멘드로 emotion의 babel plugin을 설치한 후
yarn add -D @emotion/babel-plugin
.babelrc 파일을 만들어 아래처럼 작성한다.
.babelrc
{
"presets": [
[
"next/babel",
{
"preset-react": {
"runtime": "automatic",
"importSource": "@emotion/react"
}
}
]
],
"plugins": ["@emotion/babel-plugin"]
}
typescript config
여기까지 진행 후 css props 기능을 사용하면 다음과 같은 오류를 맞이 한다.
이 경우 tsconfig.json을 수정하기만 하면 된다.
tsconfig.json
{
"compilerOptions": {
...,
"jsxImportSource": "@emotion/react" // Add this line.
}
}
compilerOptions에 "jsxImportSource": "@emotion/react" 이 줄을 추가하면 된다.
Ref.
https://emotion.sh/docs/css-prop#babel-preset
https://emotion.sh/docs/typescript#emotionreact
https://emotion.sh/docs/@emotion/babel-plugin