ご無沙汰してます、シローです。
最近はフロントサイドの開発がメインになってます。
今回は、Next.jsにAnt Designを導入し、デフォルトテーマのカスタマイズが可能な環境の構築手順について紹介します。
前提
- Next.jsがなんとなくわかる
- Ant Designがなんとなくわかる
構築手順
作り方としては
- Next.jsのアプリケーションを作成する
- Ant Designをインストールする
- 拡張プラグイン「next-plugin-antd-less」をインストールし
- スタイルシートを拡張して、テーマをカスタマイズ
という流れになります。
Next.jsのアプリケーションを作成する
作業用のディレクトリに移動してNext.jsのアプリケーションを作成します。
1 |
$ npx create-next-app antd-less-sample |
create-next-app
のコマンドがない場合は、インストールを促されるので「y」を押して進めてください。
作成したら、ディレクトリ(今回はantd-less-sample)が作成されるので、そのディレクトリに移動します。
1 |
$ cd antd-less-sample |
ディレクトリに入って、試しにNext.jsのアプリを立ち上げてみます。
1 |
$ yarn dev |
http://localhost:3000で次のような画面が立ち上がれば完了です。
Ant Designをインストールする
次にAnt Designをインストールして、実際にUIコンポーネントを配置してみましょう。
Ant Designをインストールします。
1 |
$ yarn add antd |
page/index.jsを次のように編集してUIコンポーネントを配置します。
pages/index.js
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Button } from 'antd' export default function Home() { const style = { margin: '100px' } return ( <div style={style}> <Button type="primary">Button</Button> </div> ) } |
pages/_app.jsを編集して、Ant DesignのUIコンポーネントに適用するスタイルをインポートします。
pages/_app.js
1 2 3 4 5 6 7 8 |
import '../styles/globals.css' import 'antd/dist/antd.css' // 追加 function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export default MyApp |
編集し終わったら、ボタンのコンポーネントが配置されているのが確認できます。
next-plugin-antd-lessをインストール
Antdでデフォルトテーマを編集する場合、LESSをインストールする必要があるのですが
Next.js + Antdの構成だと、LESSをシンプルにインストールしても上手くいきません。
そこで良いプラグインがないかと模索していたら、「next-plugin-antd-less」がシンプルで良いと思いました。
とりあえずインストールしましょう。
1 |
yarn add next-plugin-antd-less |
next-plugin-antd-lessを有効化するために、Nextjsの起動設定ファイルである「next.config.js」を作成・編集する必要があるので、次の内容で作成して保存しましょう。
next.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// next.config.js const path = require('path') const withAntdLess = require('next-plugin-antd-less') const nextConfig = { reactStrictMode: true, swcMinify: true, sassOptions: { includePaths: [path.join(__dirname, 'src/styles')], }, future: { webpack5: true, }, } module.exports = { ...withAntdLess({ lessVarsFilePath: './styles/antd-variables.less', // optional webpack(config) { return config } }), ...nextConfig } |
また、babelの設定も必要なので、「babel-plugin-import」プラグインをインポートします。
1 |
$ yarn add babel-plugin-import |
設定ファイルの「.babelrc.js」を次の内容で作成しましょう。
.babelrc.js
1 2 3 4 |
module.exports = { presets: [['next/babel']], plugins: [['import', { libraryName: 'antd', style: true }]], } |
終わったら、next.config.js、.babelrc.jsが変更されたので、再度「yarn dev」をしてアプリケーションを立ち上げ直してください。
テーマをカスタマイズ
最後にテーマをカスタマイズできるようにします。
まずは、stylesディレクトリに「antd-variables.less」を次の内容で作成しましょう。
styles/antd-variables.less
1 2 3 4 |
@import '~antd/lib/style/themes/default.less'; @import '~antd/dist/antd.less'; // Import Ant Design styles @primary-color: #5c8; // change antd primary-color |
作成したスタイルファイルを利用できるようにpages/_app.jsを次のように編集しましょう。
pages/_app.js
1 2 3 4 5 6 7 8 |
import 'styles/globals.css' import 'styles/antd-variables.less' // 追加 function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export default MyApp |
アプリケーションを立ち上げると、ボタンの色が青から緑に変わっているはずです。
以降テーマの変更は、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)をインポートすれば、テーマの変更が適用される