1. 概要
前回はSassとTypescriptでシンプルなレイアウトを構成してみました。今回はMaterial UIのSnackbarやLinkを扱う内容となります。
対象としては開発を1年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。
2. nodeのインストール
こちらを参考
3. プロジェクトを作成
こちらを参考
4. 必要なライブラリをインストール
こちらを参考
5. ソースコード
※前回より差分のみを記載
5-1-1. src/lib/components/alert-snackbar.tsx
import React from "react";
import { Snackbar, Alert, Slide, AlertColor } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
interface Props {
open: boolean;
severity: AlertColor;
message: string;
handleClick: any;
}
const AlertSnackbar = (props: Props) => {
const { open, severity, message, handleClick } = props;
return (
<Snackbar
open={open}
autoHideDuration={3000}
transitionDuration={{ enter: 1000, exit: 2000 }}
TransitionComponent={Slide}
TransitionProps={{ enter: true, exit: false }}
sx={{ height: "10%" }}
anchorOrigin={{ vertical: "top", horizontal: "center" }}
onClose={() =>
handleClick({
open: false,
severity,
})
}
>
<Alert
severity={severity}
action={
<ClearIcon
onClick={() =>
handleClick({
open: false,
severity,
})
}
/>
}
>
This {message} message will disappear in 3 seconds!
</Alert>
</Snackbar>
);
};
export default AlertSnackbar;
5-1-2. src/lib/components/go-back.tsx
"use client";
import { useRouter } from "next/navigation";
import { Button } from "@mui/material";
const GoBack = () => {
const router = useRouter();
return (
<Button
variant="outlined"
size="small"
color="secondary"
onClick={() => router.back()}
>
Go back
</Button>
);
};
export default GoBack;
5-1-3. src/app/components/component01/page.module.scss
.component {
color: blue;
& ul {
margin-left: 20px;
& li {
list-style: disc;
}
}
}
5-1-4. src/app/components/component01/page.tsx
"use client";
import React from "react";
import { Button, Link, AlertColor, Stack } from "@mui/material";
import scss from "./page.module.scss";
import AlertSnackbar from "@/lib/components/alert-snackbar";
import GoBack from "@/lib/components/go-back";
interface SnackbarState {
open: boolean;
severity: AlertColor;
}
const Component01 = () => {
const [state, setState] = React.useState<SnackbarState>({
open: false,
severity: "success",
});
const { open, severity } = state;
const handleClick = (newState: SnackbarState) => {
setState({ ...newState });
};
return (
<div className={scss.component}>
<GoBack />
<br />
<br />
<ul>
<li>
<Link href="#">Link</Link>
</li>
<li>
<Link href="#" color="inherit">
{'color="inherit"'}
</Link>
</li>
<li>
<Link href="#" variant="body2">
{'variant="body2"'}
</Link>
</li>
<li>
<Link href="#" underline="none">
{'underline="none"'}
</Link>
</li>
<li>
<Link href="#" underline="hover">
{'underline="hover"'}
</Link>
</li>
<li>
<Link
component="button"
variant="body2"
onClick={() => console.log("I'm a button.")}
>
Button Link({'component="button"'})
</Link>
</li>
</ul>
<br />
<Stack spacing={1} sx={{ width: "50%" }}>
<Button
variant="contained"
size="large"
color="success"
onClick={() =>
handleClick({
open: true,
severity: "success",
})
}
>
Open Snackbar(success)
</Button>
{severity === "success" ? (
<AlertSnackbar
open={open}
severity="success"
message="success"
handleClick={handleClick}
/>
) : (
<></>
)}
<Button
variant="contained"
size="medium"
color="info"
onClick={() =>
handleClick({
open: true,
severity: "info",
})
}
>
Open Snackbar(info)
</Button>
{severity === "info" ? (
<AlertSnackbar
open={open}
severity="info"
message="info"
handleClick={handleClick}
/>
) : (
<></>
)}
<Button
variant="contained"
size="small"
color="warning"
onClick={() =>
handleClick({
open: true,
severity: "warning",
})
}
>
Open Snackbar(warning)
</Button>
{severity === "warning" ? (
<AlertSnackbar
open={open}
severity="warning"
message="warning"
handleClick={handleClick}
/>
) : (
<></>
)}
<Button
variant="contained"
size="medium"
color="error"
onClick={() =>
handleClick({
open: true,
severity: "error",
})
}
>
Open Snackbar(error)
</Button>
{severity === "error" ? (
<AlertSnackbar
open={open}
severity="error"
message="error"
handleClick={handleClick}
/>
) : (
<></>
)}
</Stack>
</div>
);
};
export default Component01;
5-1-5. src/app/components/page.module.scss
.components {
color: blue;
& ul {
margin-left: 20px;
& li {
list-style: disc;
}
}
}
5-1-6. src/app/components/page.tsx
"use client";
import React from "react";
import { Link } from "@mui/material";
import scss from "./page.module.scss";
const Components = () => {
return (
<div className={scss.components}>
<ul>
<li>
<Link href="/components/component01" underline="hover">
Component01
</Link>
</li>
</ul>
</div>
);
};
export default Components;
6. サーバーを起動
npm run dev
7. ブラウザで確認
- http://localhost:3000



8. ディレクトリの構造
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ ├── next.svg
│ └── vercel.svg
├── src
│ ├── app
│ │ ├── components
│ │ │ ├── component01
│ │ │ │ ├── page.module.scss
│ │ │ │ └── page.tsx
│ │ │ ├── page.module.scss
│ │ │ └── page.tsx
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── globals.scss
│ │ ├── layout.module.scss
│ │ ├── layout.tsx
│ │ ├── page.module.scss
│ │ └── page.tsx
│ ├── lib
│ │ ├── common
│ │ │ ├── definitions.ts
│ │ │ └── sidebar-links.tsx
│ │ ├── components
│ │ │ └── alert-snackbar.tsx
│ │ │ └── go-back.tsx
│ │ ├── footer.tsx
│ │ ├── header.tsx
│ │ ├── sidebar.tsx
│ │ └── utils
│ │ └── util.ts
│ └── scss
│ └── common
│ ├── _index.scss
│ ├── _mixin.scss
│ ├── _mq.scss
│ └── _variables.scss
├── tailwind.config.ts
└── tsconfig.json
11 directories, 33 files
9. 備考
今回はMaterial UIのSnackbarやLinkを扱う内容でした。
10. 参考
投稿者プロフィール

-
開発好きなシステムエンジニアです。
卓球にハマってます。
最新の投稿
【Next.js】2025年2月9日【NextJS】View and Download PDF
【AWS】2025年2月1日【AWS】Github ActionsやAWS SAMを使ってAWS S3・CloudFrontにウェブコンテンツをデプロイし、サブドメインにアクセスできるようにする
【AWS】2025年1月25日【AWS】Deploy Serverless NextJS app with AWS Lambda Web Adapter using AWS SAM
【Next.js】2025年1月16日【NextJS】Access nextjs app launched on WSL2 from an external terminal