【NextJS】SnackbarやLink

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. 参考

投稿者プロフィール

Sondon
開発好きなシステムエンジニアです。
卓球にハマってます。

関連記事

  1. 【NextJS】Button・IconButton・LoadingBu…

  2. 【NextJS】日程調整からグループ分け、精算までPankoが便利です…

  3. 【NextJS】Firestore

  4. 【NextJS】Redux

  5. 【NextJS】Server Actions with MySQL

  6. 【NextJS】Internationalization(i18n) …

最近の記事

  1. AWS
  2. flutter

制作実績一覧

  1. Checkeys