Next.js フロントサイド

Next.js + Ant Designでデフォルトテーマをカスタマイズできるようにしてみた

ご無沙汰してます、シローです。

最近はフロントサイドの開発がメインになってます。

今回は、Next.jsにAnt Designを導入し、デフォルトテーマのカスタマイズが可能な環境の構築手順について紹介します。

前提

  • Next.jsがなんとなくわかる
  • Ant Designがなんとなくわかる

構築手順

作り方としては

  1. Next.jsのアプリケーションを作成する
  2. Ant Designをインストールする
  3. 拡張プラグイン「next-plugin-antd-less」をインストールし
  4. スタイルシートを拡張して、テーマをカスタマイズ

という流れになります。

Next.jsのアプリケーションを作成する

作業用のディレクトリに移動してNext.jsのアプリケーションを作成します。

create-next-appのコマンドがない場合は、インストールを促されるので「y」を押して進めてください。

作成したら、ディレクトリ(今回はantd-less-sample)が作成されるので、そのディレクトリに移動します。

ディレクトリに入って、試しにNext.jsのアプリを立ち上げてみます。

http://localhost:3000で次のような画面が立ち上がれば完了です。

Ant Designをインストールする

次にAnt Designをインストールして、実際にUIコンポーネントを配置してみましょう。

Ant Designをインストールします。

page/index.jsを次のように編集してUIコンポーネントを配置します。

pages/index.js

pages/_app.jsを編集して、Ant DesignのUIコンポーネントに適用するスタイルをインポートします。

pages/_app.js

編集し終わったら、ボタンのコンポーネントが配置されているのが確認できます。

next-plugin-antd-lessをインストール

Antdでデフォルトテーマを編集する場合、LESSをインストールする必要があるのですが

Next.js + Antdの構成だと、LESSをシンプルにインストールしても上手くいきません。

そこで良いプラグインがないかと模索していたら、「next-plugin-antd-less」がシンプルで良いと思いました。

とりあえずインストールしましょう。

next-plugin-antd-lessを有効化するために、Nextjsの起動設定ファイルである「next.config.js」を作成・編集する必要があるので、次の内容で作成して保存しましょう。

next.config.js

また、babelの設定も必要なので、「babel-plugin-import」プラグインをインポートします。

設定ファイルの「.babelrc.js」を次の内容で作成しましょう。

.babelrc.js

終わったら、next.config.js、.babelrc.jsが変更されたので、再度「yarn dev」をしてアプリケーションを立ち上げ直してください。

テーマをカスタマイズ

最後にテーマをカスタマイズできるようにします。

まずは、stylesディレクトリに「antd-variables.less」を次の内容で作成しましょう。

styles/antd-variables.less

作成したスタイルファイルを利用できるようにpages/_app.jsを次のように編集しましょう。

pages/_app.js

アプリケーションを立ち上げると、ボタンの色が青から緑に変わっているはずです。

以降テーマの変更は、antd-variables.lessに変数名を上書きすることで可能になります。

テーマの変数はこちらを参考ください。(https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)

まとめ

  • Ant Designのテーマを編集するにはLESSを使えるようにしないといけない
  • Next.js + Ant Designの構成だと、専用のプラグイン「next-plugin-antd-less」(babel-plugin-import)をインストールする必要がある
  • next.config.js、.babelrc.jsを設定後、_app.jsでテーマカスタマイズ用のスタイルシート(今回はantd-variables.less)をインポートすれば、テーマの変更が適用される

-Next.js, フロントサイド

© 2024 Shiro's secret base