Next.js Material-UIの導入

開発環境

• Windows
• node v18.16.0
• Next.js v13.4.12

参考情報

Installation - Material UI
Next.js App Router - Material UI

行った内容

◆公式を参考にライブラリのインストール

npm install @mui/material @emotion/react @emotion/styled
# Robotoフォントがデフォルトのためインストール
npm install @fontsource/roboto
# アイコン
npm install @mui/icons-material

◆公式を参考にPeerDependencesとlayout.tsxへ記載。
package.json

"peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
},

layout.tsx

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

◆動作確認
page.tsx

import * as React from 'react';
import Button from '@mui/material/Button';

export default function Home() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  )
}

ローカルで実行して以下のように表示されることが確認できた。