Next js (React) @emotions 사용하기

Plugins 설치

npm i @emotion/babel-preset-css-prop @babel/plugin-proposal-decorators

root폴더에서 .babelrc 파일 생성

{
    "presets": [
        "next/babel",
        "@emotion/babel-preset-css-prop"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            },
            "emotion"
        ]
    ]
}

React emotion 사용

import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/react'


const border = css`
    border:1px solid #fff;
`

const AppLayout = ({ children }) => {
    return(
        <div css={border}>
            {children}
        </div>
    );
};


AppLayout.propType = {
    children: PropTypes.node.isRequired,
};

export default AppLayout;