Next13+MUI

2023年4月4日 20:50

Nuxt13のβ版はappディレクトリを使用した構成になっています。そこにMaterial UIを導入する方法について、手順メモを残します

Git

空のリポジトリを作成してクローンしておく

Create Next App

npx create-next-app@latest . --typescript --experimental-app

【コマンド説明】
.：カレントディレクトリに直接アプリを作成する
--typescript：TypeScriptを採用するオプション
--experimental-app：β版のappディレクトリを採用するオプション

【オプション選択】
ESLintを入れるかどうか
√ Would you like to use ESLint with this project? ... No / Yes
srcディレクトリを作成するかどうか
√ Would you like to use `src/` directory with this project? ... No / Yes
インポートエイリアスの設定
√ What import alias would you like configured? ... @/*

【公式ドキュメント】
https://beta.nextjs.org/docs/installation

MUI

npm install @mui/material @emotion/react @emotion/styled

【公式ドキュメント】
https://mui.com/material-ui/getting-started/installation/

Font

npm install @fontsource/roboto

Google Robotoフォントをインストール

Icon

npm install @mui/icons-material

マテリアルアイコンをインストール

Theme

app/theme.ts

import { createTheme } from "@mui/material/styles";

// Create a theme instance.
const theme = createTheme({});

export default theme;

src/app直下にtheme.tsファイルを作成

Layout

"use client";

import "./globals.css";
import theme from "./theme";

import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <head />
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <body>{children}</body>
      </ThemeProvider>
    </html>
  );
}

src/app/layout.tsxを修正

【参考サイト】
https://velog.io/@projaguar/Next.js-13-app-Directory%EC%99%80-MUI