💅

Next.js + Emotionでファイルを分割してスタイリングする

1 min read

Next.jsの環境でEmotionのcss関数でスタイリングを行う際に少し手間取ったのでその忘備録。

設定する

emotionを追加

yarn add @emotion/react

https://emotion.sh/docs/@emotion/react

tsconfig.jsonjsxImportSourceパラメーターを追加する。
※ これが設定できていないとcss属性をpropできないので詰む。

{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react"
  }
}

babelプラグインを追加

yarn add -D @emotion/babel-plugin

.babelrcを作成して下記内容を記載する。

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

最低限以上の設定をしておけばcss関数を用いてスタイリングが可能になる。

スタイリング例

Emotionには、さまざまなスタイリング方法があるが、(styled関数や、jsxなど)今の所私は、断然css推しです。

理由としては大きく二つあります。

  • 別のファイルに分離しやすい
  • css Modulesらしく記法できる

下記にスタイリングの一例を記載します。

// src/sryles/pages/index.styles.ts
import { css } from '@emotion/react'

export const container = css`
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
`
// src/pages/index.tsx
import type { NextPage } from 'next'
import * as styles from '../styles/pages/index.styles'

const Home: NextPage = () => {
  return (
    <div css={styles.container}></div>
  )
}

余談ですが、vscodeを利用している場合、vscode-styled-componentsをインストールしておくと、色付けされて見やすくなります。

https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

Discussion

ログインするとコメントできます