skiss: Next.js MUIを試してみる

skissについて

©skiss 1997 - 2024

タイトル : Next.js MUIを試してみる

更新日 : 2024-01-21

カテゴリ : プログラミング

タグ :

frontend

nextjs

material-ui

MUIを試してみます

以下を参照しました。

流れ

create-next-appします

$ npx create-next-app front --typescript

以下のように回答しました。

muiをインストールします

インストールします。cssは一旦削除します。MUIで全部書こうかなと。

$ cd front
$ npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache
$ cd src/app
$ rm globals.css page.module.css

ソースを書き替えます

以下、画面です。

src/app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
/* 削除 import "./globals.css"; */

// 追加
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Next MUI Test",  /* 変更 */
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {/* 追加 */}
        <AppRouterCacheProvider>
          {children}
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

src/app/page.tsx

/* 削除
import Image from "next/image";
import styles from "./page.module.css";
*/
// 追加
import { Button, Stack, TextField, Typography } from "@mui/material";

export default function Home() {
  return (
    <div>
      {/* https://qiita.com/KokiSakano/items/2cd9b1488c4f508633fb　から */}
      <Stack height="100lvh" justifyContent="center" alignItems="center" gap="32px">
        <Typography id="login_heading" variant="h1" fontSize="1.5rem">ログインフォーム</Typography>
        <Stack component="form" width={560} gap="24px" aria-labelledby="login_heading">
          <TextField label="メールアドレス" />
          <TextField label="パスワード" />
          <Button variant="contained">ログイン</Button>
        </Stack>

        {/* directionがrowでStackを横並びに出来る。
            paddingとspacingで調整すれば、
            cssを書かなくてもある程度見栄え調整も出来るかも*/}
        <Stack direction={"row"} padding={1} spacing={2}>
          {/* variantは contained以外には以下など */}
          <Button variant="contained">ボタン contained</Button>
          <Button variant="text">ボタン text</Button>
          <Button variant="outlined">ボタン outlined</Button>
          {/* disable */}
          <Button variant="contained" disabled>ボタン contained disabled</Button>
          {/* あとは https://mui.com/material-ui/react-button/ を見ていろいろと試す */}
        </Stack>
      </Stack>
    </div>
  );
}