Next.js Emotion 적용하기

Next.js 에서 Emotion 을 사용하려면 간단한 설정을 해주어야 한다.

Next JS 설치하기

1. Typescript 를 적용하기위해 --ts 를 붙여준다.
   npx create-next-app [프로젝트명] --ts

2. Emotion/styled , Emotion/react, Emotion/css 를 설치해준다.
   npm install emotion/styled, emotion/react, emotion/css

글로벌 스타일 생성

1. styles -> Globalstyle.tsx 생성

글로벌 스타일 선언
export const globalStyles = (
<Global styles={css`
			html {
					font-size: 62.5%;
					box-sizing: border-box;
				 }
			}
		)

2. _app.tsx에 글로벌스타일 적용

import { globalStyles } from 'styles/GlobalStyle';

export default function App({ Component, pageProps }: AppProps) {
    return (
        <Layout>
            {globalStyles}
            <Component {...pageProps} />
        </Layout>
    );
}

ThemeProvider 설정

1. styles -> theme.tsx 생성

import { Theme } from '@emotion/react';

const theme: Theme = {
    fontSizes: {
    xxs: '12px',
    xs: '13px',
    sm: '14px',
    base: '16px',
    md: '18px',
    lg: '24px',
  },
  colors: {
    black: '#000',
    dark: '#191a20',
    primary: '#3f4150',
    secondary: '#8c8d96',
  },
};

export default theme;

2. _app.tsx import 하여 적용
   Q. 글로벌스타일을 테마프로바이더에 같이 적용시킬수는 없는가??

import { ThemeProvider } from '@emotion/react';
import theme from 'styles/theme';

export default function App({ Component, pageProps }: AppProps) {
    return (
        <Layout>
            {globalStyles}
            <ThemeProvider theme={theme}>
                <Component {...pageProps} />
            </ThemeProvider>
        </Layout>
    );
}

Babelrc

1. @emotion/babel-plugin 를 설치하지 않았다면 설치해준다.

{
    "presets": [
        [
            "next/babel",
            {
                "preset-react": {
                    "runtime": "automatic",
                    "importSource": "@emotion/react"
                }
            }
        ]
    ],
    "plugins": ["@emotion/babel-plugin"]
}

2. Next 공식 문서를 보면 SWC를 사용해서 바벨릭을 대체할 수 있는데 적용이 안 된다. Typescript 때문인지 더 알아볼 필요성이 있다.