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

ishigaki

こんにちは、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 を渡すことで渡したスタイルをグローバルなものとしてアプリ全体に適用することができます。

公式ドキュメントの Global スタイルの説明

@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 の構成に興味のある方の参考にしていただければと思います。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

ishigaki

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。