1. ホーム /
  2. Blog /
  3. Next.js /
  4. Nextjs + MUI で開発を行う(非SSR)
Next.js

Nextjs + MUI で開発を行う(非SSR)

  • 2023.03.04
  • by ShinyaTomozumi
  • 0

「React」で「Material UI」を導入するには「MUI」というライブラリを使用すると簡単に組み込む事が出来ます。
「Next.js」にも同様に導入することは出来るので、導入までの手順をまとめます。
また今回はSSRについては対応しないため「@emotion/cache」は入れないようにします。

環境

  • Mac Intel Ventura 13.1
  • Next.js 13.2.3
  • yarn 1.22.17
  • MUI 5.11.11

「MUI」を導入する

以下のコマンドで「MUI」をインストール出来ます(「yarn」を使用時)

$ yarn add @mui/material @emotion/react @emotion/styled

インストール後に、テーマファイルを作成します。

import {createTheme} from '@mui/material/styles';
import {red, blue} from '@mui/material/colors';

/**
 * UIのテーマを設定
 */
const Theme = createTheme({
    palette: {
        primary: {
            main: blue['500']
        },
        secondary: {
            main: blue.A700
        },
        error: {
            main: red.A400
        },
    },
});

export default Theme;

作成したテーマを「_app.tsx」に組み込んでプロジェクト全体に「MUI」を適用します。

...省略
// importでテーマの適用ライブラリを呼び出す
import {ThemeProvider} from '@mui/system';
import theme from '@/Theme/Theme';
import CssBaseline from '@mui/material/CssBaseline';

function MyApp({Component, pageProps}: AppProps) {
   
   ...省略
   
   // 「ThemeProvider」を適用する
   return (
        <ThemeProvider theme={theme}>
            <CssBaseline/>
            <Component {...pageProps} />
        </ThemeProvider>
    );
}

export default MyApp;

「icons-material」を導入

また「Material UI」でアイコン等を使用する場合「icons-material」を使うと、アイコン画像を探す手間も省けます。

$ yarn add @mui/icons-material

使用する場合はimportで該当するアイコンを呼び出し、htmlタグで使用します。

...省略
// MUI アイコンをimportする
import AccessibilityNewIcon from '@mui/icons-material/AccessibilityNew';

const Home: NextPage<{ liff: Liff | null; liffError: string | null }> = ({liff, liffError}) => {
    return (
        <div>
            ...省略

            <main className={styles.main}>
                <h1>
                    <AccessibilityNewIcon></AccessibilityNewIcon>
                    上記のようにタグで使用します。
                </h1>
            </main>
        </div>
    );
};

export default Home;

使用したいアイコンを探す場合は、以下のURLに一覧がありますがので、目的に応じたアイコンを探し出して使用してください。

https://mui.com/material-ui/material-icons/