Next.jsでAnt Designを利用する(Ant DesignのCustom Variable)

最終更新日:2020-07-23

※この記事は著者(@burhanudayさん)に許可を取り、https://dev.to/burhanuday/using-ant-design-with-nextjs-custom-variables-for-ant-design-57m5を日本語に翻訳したものです。

Next.jsの学習のために新しいプロジェクトを始めましょう。NextjsとAnt Designを利用したプロジェクトをセットアップしたとき、私は最初の問題に直面しました。Ant DesignをNext.jsと共に使うのはかなり簡単ですが、Custom Variableを利用しようとすると厄介なことになります。
Next.jsのの新しいプロジェクトは、次のように作成できます。

yarn create next-app app-name

もしくは、

npx create-next-app app-name

このように作成することもできます。

Next.jsプロジェクトの中で、Ant Designを次のようにインストールしましょう。

yarn add antd

もしくは、

npm install antd

このように作成することもできます。

プロジェクトのルートディレクトリの中の"styles"フォルダーに、”antd.less”と呼ばれるファイルを作成しましょう。
もし”styles”フォルダーを利用していなければ、新たに作成しましょう。
”antd.less”は、全てのCustom Variableが置かれる場所です。

antd.less:

@import "~antd/dist/antd.less";

@primary-color: #000; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

上記のCustom Variableはあなたが望むように変更することができます。
詳細を知りたい場合は、Ant Designのカスタマイズに関するドキュメントをご覧ください。

"pages"ディレクトリに"_app.js"と呼ばれるファイルを作り、以下の内容を記載します。

_app.js

import React from "react";
import App from "next/app";

import "../styles/antd.less";

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return <Component {...pageProps} />;
  }
}

export default MyApp;

"_app.js"内でその他のグローバルスタイルをインポートすることもできます。
現在、このCustom Variableには効果がありません。これを適用させるために、これらのパッケージをインストールする必要があります。

yarn add @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less

または、

npm install --save @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less

そして、先ほどのCustom Variableを適用させるため、カスタムされたNext.js Configを作成する必要があります。

next.config.js:

const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");

const isProd = process.env.NODE_ENV === "production";

// fix: prevents error when .less files are required by node
if (typeof require !== "undefined") {
  require.extensions[".less"] = (file) => {};
}

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  ...withLess(
    withSass({
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
    })
  ),
});

このConfigを書くことで、プロジェクト内でlessとsassとcss moduleを利用できるようになります。Ant Design用のCustom Variableも適用されるようになります。