글 작성 시 사용한 Nextjs 버전 → 12.1.4
emotion 버전 → 11.9.0
TL;DR
Nextjs 프로젝트에 emotion을 적용하는 법을 다루는 게시글 입니다.
인 척을하는 emotion 광고글 입니다.
⚽️ 목표
Nextjs 프로젝트에 emotion을 적용 해보자!
1. emotion vs styled-components
주의 !
- 내가 styled-components를 사랑한다! 싶으면 스킵하고 2번부터 봐주세요... 제..발...잘못했어여..
그래도... 궁금하다면야?
둘다 처음인데요...
•
감히 말해보자면 일단 emotion을 사용해보는건 어떨까요? emotion 하나로 styled-components와 emotion 두 스타일 다 직접 코딩 해보시고 편한걸 골라보자구요!
2. 설정
•
설치하고자 하는 프로젝트의 루트 디렉터리에서 emotion을 설치해줍니다.
npm i @emotion/react # css 프로퍼티를 이용한 스타일 사용 법
npm i @emotion/styled # styled-component와 똑같은 스타일 사용 법 사용 시
npm i @emotion/babel-plugin # emotion의 바벨 관련 설정을 위해 필요
Bash
복사
•
.babelrc(없으면 프로젝트 루트 디렉터리에 파일을 생성하세요!)에서 emotion을 적용해줍니다. → 8버전 이후 부터 필수는 아니지만 강력하게 추천합니다!
{
"presets": [
[
"next/babel",
{
"preset-react": {
"runtime": "automatic",
"importSource": "@emotion/react"
}
}
]
],
// storybook 작성 시 추가적으로 출력되는 에러를 제거
"plugins": [
["@babel/plugin-proposal-class-properties", { "loose": true }],
["@babel/plugin-proposal-private-methods", { "loose": true }],
["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
["@emotion"]
]
}
JSON
복사
3. 적용 확인하기
•
코드 적용을 확인해보세요!
import type { NextPage } from "next";
import { css } from "@emotion/react";
const Home: NextPage = () => {
return (
<>
main page
<button
css={css`
background-color: pink;
width: 30px;
height: 30px;
`}
type="button"
>
ihi
</button>
</>
);
};
export default Home;
TypeScript
복사
emotion 적용 확인