Next.jsにMaterial UIを組み込んでReactで使う方法

Material-UIはGoogleが提唱するマテリアルデザインをベースに開発された、コンポーネントライブラリです。

Material-UIをNext.jsに組み込んでReactと共に使うことで簡単にサイトをマテリアルデザインに対応したものに変更することができます。

Next.jとReactの実行環境作成

Next.jsにMaterial-UIを組み込むにはNext.jsやReactの環境が必要です。

環境の作成方法は以下のサイトを参照して作成してください。

Next.jsでReactを使った開発環境を作成する方法

Reactを利用してアプリケーションを作成する環境を作るには「npx create-react-app」もしくは「npx create-next-app 」コマンドを実行するだけで開発環境を簡単に準備することができます。

lightgauge.net

Material-UIを組み込む

Material-UIを組み込むにはnpmコマンドを使って組み込みます。

npm install @material-ui/core

組み込みが完了後package.jsonを確認すると

{
  "name": "react-sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.1"
  }
}

とMaterial-UIが組み込まれていることがわかります。

Material-UIを使ってみる

Material-UIを使うには@material-ui/coreをimportして使います。

今回はButtonコンポーネントを使ってみます。

import React  from "react" ;
import Button from "@material-ui/core/Button" ;

export default function Home(){
    return (
        <Button variant="contained" color="primary">
            OKボタン
        </Button>
    );
}

Reactを使っているので普通のHTMLタグのようにButtonコンポーネントを呼び出すだけで使えます。

まとめ

Googleが提唱するMaterialデザインをベースに開発された、コンポーネントライブラリMaterial-UIを使えば簡単にサイトをマテリアルデザインに対応することができます。

またReactとの相性も良く、普通のHTMLタグのようにMaterial-UIコンポーネントを呼び出すだけで使うことができます。