【NextJS】Events

ホーム
BLOG
【Next.js】
【NextJS】Events

【Next.js】
2023.09.09

【NextJS】Events

概要
nodeのインストール
プロジェクトを作成
必要なライブラリをインストール
ソースコード
サーバー起動
ブラウザで確認
ディレクトリの構造
備考
参考

【NextJS】TextField

1. 概要

前回はTextFieldの使い方についてでした。今回はEventsを扱う内容となります。

対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. nodeのインストール

こちらを参考

【Node.js】バージョン管理をVoltaに移行する | 株式会社isub

3. プロジェクトを作成

こちらを参考

【NextJS】SassとTypescriptでレイアウトを構成 (isub.co.jp)

4. 必要なライブラリをインストール

こちらを参考

【NextJS】Button・IconButton・LoadingButton・FAB (isub.co.jp)

5. ソースコード

※前回より差分のみを記載

5-1-1. src/lib/components/spacer.tsx

type Props = {
  top: number;
  right: number;
  bottom: number;
  left: number;
};

const Spacer = (props: Props) => {
  const { top, right, bottom, left } = props;
  return (
    <span
      style={{
        marginTop: top,
        marginRight: right,
        marginBottom: bottom,
        marginLeft: left,
      }}
    ></span>
  );
};

export default Spacer;

5-1-2. src/app/events/event01/page.module.scss

.component {
  color: blue;
  & ul {
    margin-left: 20px;
    & li {
      list-style: disc;
    }
  }
}

5-1-3. src/app/events/event01/page.tsx

"use client";

import React from "react";
import Box from "@mui/material/Box";
import { Button } from "@mui/material";
import scss from "./page.module.scss";
import GoBack from "@/lib/components/go-back";
import Spacer from "@/lib/components/spacer";

const Component04 = () => {
  const handleClick = (message?: string | undefined) => {
    if (message === undefined) message = "Say something!";
    alert(message);
  };

  return (
    <div className={scss.component}>
      <GoBack />
      <br />
      <br />
      <ul>
        <li>
          <h1>Responding to events</h1>
        </li>
      </ul>
      <br />
      <Box
        sx={{
          width: "100%",
          p: 2,
          border: "1px dashed grey",
          borderRadius: "20px",
          "&:hover": {
            backgroundColor: "primary.main",
            opacity: [0.9, 0.8, 0.7],
          },
        }}
      >
        <Button
          variant="contained"
          size="large"
          color="secondary"
          onClick={() => handleClick("You clicked me?")}
        >
          Click me
        </Button>
        <Spacer top={0} right={0} bottom={0} left={10} />
        <Button
          variant="contained"
          size="large"
          color="warning"
          onClick={() => handleClick("You called me?")}
        >
          Call me
        </Button>
        <Spacer top={0} right={0} bottom={0} left={10} />
        <Button
          variant="contained"
          size="large"
          color="error"
          onClick={() => handleClick()}
        >
          Taciturnity
        </Button>
      </Box>
    </div>
  );
};

export default Component04;

5-1-4. src/app/events/page.module.scss

.components {
  color: blue;
  & ul {
    margin-left: 20px;
    & li {
      list-style: disc;
    }
  }
}

5-1-5. src/app/events/page.tsx

"use client";

import React from "react";
import { Link } from "@mui/material";

import scss from "./page.module.scss";

const Events = () => {
  return (
    <div className={scss.components}>
      <ul>
        <li>
          <Link href="/events/event01" underline="hover">
            Event01
          </Link>
        </li>
      </ul>
    </div>
  );
};

export default Events;

5-1-6. src/lib/common/sidebar-links.tsx

import HomeIcon from "@mui/icons-material/Home";
import AdjustIcon from "@mui/icons-material/Adjust";

import { SidebarLinkType } from "./definitions";

const sidebarHome: SidebarLinkType = {
  label: "Home",
  path: "/",
  icon: <HomeIcon />,
  targetSegment: null,
};
const sidebarComponents: SidebarLinkType = {
  label: "Components",
  path: "/components",
  icon: <AdjustIcon />,
  targetSegment: "components",
};
const sidebarEvents: SidebarLinkType = {
  label: "Events",
  path: "/events",
  icon: <AdjustIcon />,
  targetSegment: "events",
};
export const sidebarLinks: SidebarLinkType[] = [
  sidebarHome,
  sidebarComponents,
  sidebarEvents,
];

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
│   │   │   ├── component02
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── component03
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── page.module.scss
│   │   │   └── page.tsx
│   │   ├── events
│   │   │   ├── event01
│   │   │   │   ├── 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
│   │   │   └── spacer.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

15 directories, 42 files