Skip to content

Instantly share code, notes, and snippets.

@tatsuyasusukida
Created September 28, 2022 02:31
Show Gist options
  • Save tatsuyasusukida/3e867f8df4a69f867633c5ebf21e350f to your computer and use it in GitHub Desktop.
Save tatsuyasusukida/3e867f8df4a69f867633c5ebf21e350f to your computer and use it in GitHub Desktop.
Next.js Emotion.js Setup Example
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
compiler: {
emotion: true, // IMPORTANT
},
}
module.exports = nextConfig
import { css } from "@emotion/react";
import { NextPage } from "next";
const ReactPage: NextPage = () => {
const color = 'white'
return (
<div
css={css`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
&:hover {
color: ${color};
}
`}
>
Hover to change color.
</div>
)
}
export default ReactPage
import styled from "@emotion/styled";
import { NextPage } from "next";
const StyledPage: NextPage = () => {
const Button = styled.button`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
color: black;
font-weight: bold;
&:hover {
color: white;
}
`
return <Button>This my button component.</Button>
}
export default StyledPage
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"jsxImportSource": "@emotion/react", // IMPORTANT
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment