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

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

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

スポンサーリンク

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

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

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

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

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 コンポーネントを呼び出すだけで使うことができます。

スポンサーリンク
スポンサーリンク
React学習のおすすめの本
Javascriptの学習におすすめの本
JavaScript
スポンサーリンク
ソフトウェア開発日記
タイトルとURLをコピーしました