emotion 실행이 안돼서 이리저리 구글링해서 알아보니, 의존성으로 설치해야하는 plugin이 추가로 있는것 같아 추가하였다.
더불어 tsconfig도 옵션을 추가하였다.
//package.json
"dependencies": {
"@emotion/babel-plugin": "^11.11.0",
"@emotion/babel-preset-css-prop": "^11.11.0",
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
//tsconfig.json
"jsxImportSource": "@emotion/react",
"paths": {
"@/*": ["./src/*"]
}
//실행되는 component
import { css } from "@emotion/react";
const style = css({
color: "red",
});
export default function Layout({ children }: { children: React.ReactNode }) {
const url = useRouter().query;
return (
<div css={style}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="">