Next.jsで作成したアプリにemotionを使用してグローバルCSSを追加する

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、Reactベースのフレームワークである Next.js で作成したアプリにCSS-in-JS ライブラリの emotion を使って全てのページに適用されるグローバルCSSを追加する方法についてまとめたいと思います。

前提として、create-next-app で環境を構築した時点での作業を想定しています。

Next.js で作成したアプリに emotion を使用してグローバルCSSを追加する方法

1. _app.tsx を作成する

Next.js は App というコンポーネントを用いてページの初期化をしています。そのため、App コンポーネントを ./pages/_app.tsx ファイルで上書きすることで、アプリのページ全体に適用したい機能を追加することができます。

create-next-app を叩いた時点では _app.tsx が存在していないので、作成します。

import type { AppProps } from 'next/app'\

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

2. emotion の Global コンポーネントを _app.tsx に追加する

emotion には Global というコンポーネントが標準機能として存在しており、他のコンポーネント同様 styles を渡すことで渡したスタイルをグローバルなものとしてアプリ全体に適用することができます。

@emotion/react から import して使用します。

import type { AppProps } from 'next/app'
import { Global } from '@emotion/react'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Global
        styles={css`
          img {
            max-width: 100%;
          }
        `}
      />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

3. styles を別のファイルに分離する

_app.tsx にグローバルにしたい styles が全て書かれているとファイルが肥大化するため、./styles/global.ts のようなファイルに分割します。

import { css } from '@emotion/react'

export const style = css`
  html,
  body {
    width: 100%;
    height: 100%;
  }
  img {
    max-width: 100%;
  }
`

import type { AppProps } from 'next/app'
import { Global } from '@emotion/react'
import { style } from '../styles/global'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Global styles={style} />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

こちらの方法で Next.js で作成したアプリの全ページに適用されるグローバルCSSを追加することができました。

まとめ

今回は Next.js で作成したアプリに emotion を使って全てのページに適用されるグローバルCSSを追加する方法についてまとめました。

emotion に Global コンポーネントが用意されており、それを使うだけで _app.tsx と組み合わせてグローバルCSSを追加することができるのは非常に便利で、相性の良い組み合わせだなと感じました。

今後もこの構成を触りながら得た知見をまとめて共有していきたいと考えています。

Next.js + emotion の構成に興味のある方の参考にしていただければと思います。