00. styled-componentsとは

styled-componentsはReact向けに作られたCSS in JSライブラリの一つです。スタイルをJavaScript内で定義し、コンポーネントごとにスタイルを管理できるため、スタイルの重複や競合を防ぎやすくなります。
本記事ではNext.jsでstyled-componentsを使用するための初期設定の方法を記します。

01. styled-componentsのインストール

まずは対象のプロジェクト内で以下コマンドを実行し、パッケージをインストールします。

$ npm install --save styled-components

今回はTypeScriptを使用するため型定義の@types/styled-componentsもインストールします。

$ npm install --save-dev @types/styled-components

02. next.config.mjsの設定

next.config.mjsのファイルに以下の設定を追加し、compilerオプションのstyled-componentsを有効化します。

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  //以下を追加
  compiler: {
    styledComponents: true,
  },
};

export default nextConfig;

03. サーバーサイドレンダリングのサポート設定

SSRやSSGを使用する際に、サーバーサイドでスタイルを適用させるための設定が必要です。これにより、ページの初回読み込み時に正しくスタイルが適用されるようになります。pages/_document.tsxファイルを作成し、以下の設定を追加します。

import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

// デフォルトのDocumentクラスを拡張してカスタムDocumentクラスを作成
export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      // Appコンポーネントをラップし、スタイルを収集
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });

      // 初期プロパティを取得
      const initialProps = await Document.getInitialProps(ctx);

      // initialPropsにスタイルを追加して返す
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

準備はこれで完了です。

04. 実際に書いてみる

試しにpages/index.tsxでstyled-componentsを使ってみます。

//書式
styled.要素名`スタイル`

styled.要素名で要素を指定し、直後のテンプレート文字列の中でスタイルを定義します。
以下でh1要素にスタイルを適用したTitleコンポーネントを定義します。

import type { NextPage } from 'next';
import styled from 'styled-components';

const Title = styled.h1`
  color: red;
`;
const Home: NextPage = () => {
  return (
    <div>
      <Title>Hello World</Title>
    </div>
  );
}

export default Home;

サーバーを起動し、ブラウザで確認するとスタイルの適用が確認できます。

以上でNext.jsでのstyled-componentsの導入設定は完了です。

参考記事一覧