【NextJS】Fullscreen of a portion of a screen on click

ホーム
BLOG
【Next.js】
【NextJS】Fullscreen of a port…

【Next.js】
2025.04.07

【NextJS】Fullscreen of a portion of a screen on click

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

【NextJS】Zoom in on an image during hover

1. 概要

前回はマウスを当てると画像が拡大される内容についてでした。今回は画面の一部をフルスクリーンにする内容になります。

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

2. nodeのインストール

こちらを参考

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

3. プロジェクトを作成

3-1-1. こちらを参考

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

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

4-1-1. こちらを参考

【NextJS】OAuth authentication with Google account(Auth.js) – 株式会社isub
下記も追加でインストール

npm install --save react-cropper

5. ソースコード

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

5-1-1. src/app/components/component14/full-screen.tsx

import { useRef } from "react";
import Image from "next/image";
import { Button, Divider } from "@mui/material";
import FullscreenIcon from "@mui/icons-material/Fullscreen";
import scss from "./page.module.scss";

const imageLoader = ({
  src,
  width,
  quality,
}: {
  src: string;
  width: number;
  quality?: number;
}) => {
  return `${src}?w=${width}&q=${quality || 75}`;
};

const FullScreenComponent = () => {
  const fullScreenRef = useRef<HTMLDivElement>(null);

  const imgSrc: string = "/panko-lineup.png";

  const enterFullScreen = () => {
    const divElement = fullScreenRef.current;
    const requestFullScreen =
      divElement?.requestFullscreen ||
      (divElement as any).webkitRequestFullscreen ||
      (divElement as any).mozRequestFullScreen ||
      (divElement as any).msRequestFullscreen;
    requestFullScreen.call(divElement);
  };

  return (
    <div
      ref={fullScreenRef}
      className={`${scss.baseContainer} ${scss.fullscreenContainer}`}
    >
      <p>Full screen area start</p>
      <Divider sx={{ marginTop: 1, marginBottom: 1 }} />
      <Button
        variant="contained"
        startIcon={<FullscreenIcon />}
        size="small"
        color="primary"
        onClick={() => enterFullScreen()}
      >
        Full screen
      </Button>
      <Divider sx={{ marginTop: 1, marginBottom: 1 }} />
      <div>
        <Image
          className={scss.fullscreenImage}
          loader={imageLoader}
          src={imgSrc}
          alt="FullScreen"
          width={0}
          height={0}
          sizes="100vw"
          style={{ width: "100vw", height: "auto" }}
        />
      </div>
      <Divider sx={{ marginTop: 1, marginBottom: 1 }} />
      <p>Full screen area end</p>
    </div>
  );
};

export default FullScreenComponent;

5-1-2. src/app/components/component14/client-page.tsx

"use client";

import FullScreenComponent from "./full-screen";

const ClientPage = () => {
  return (
    <div>
      <div>Header</div>
      <FullScreenComponent />
    </div>
  );
};

export default ClientPage;

5-1-3. src/app/components/component14/page.module.scss

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

  & .baseContainer {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & .fullscreenImage {
      max-width: 50vw;
      max-height: none;
      object-fit: contain;
    }
  }

  & .fullscreenContainer {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: white;
    color: black;
    transition: all 0.3s ease;

    &:-webkit-full-screen,
    &:fullscreen {
      background-color: #ffffff;

      & .fullscreenImage {
        max-width: 50vw;
        max-height: none;
        object-fit: contain;
      }
    }
  }
}

5-1-4. src/app/components/component14/page.tsx

import Divider from "@mui/material/Divider";
import GoBack from "@/lib/components/go-back";
import scss from "./page.module.scss";
import ClientPage from "./client-page";

const Component14 = () => {
  return (
    <div className={scss.component}>
      <GoBack />
      <br />
      <br />
      <ul>
        <li>Full Screen</li>
        <ul>
          <li>fullscreen</li>
        </ul>
      </ul>
      <Divider sx={{ marginTop: 2, marginBottom: 2 }} />
      <div>
        <ClientPage />
      </div>
    </div>
  );
};

export default Component14;

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>
        <li>
          <Link href="/components/component02" underline="hover">
            Component02
          </Link>
        </li>
        <li>
          <Link href="/components/component03" underline="hover">
            Component03
          </Link>
        </li>
        <li>
          <Link href="/components/component04" underline="hover">
            Component04
          </Link>
        </li>
        <li>
          <Link href="/components/component05" underline="hover">
            Component05
          </Link>
        </li>
        <li>
          <Link href="/components/component06" underline="hover">
            Component06
          </Link>
        </li>
        <li>
          <Link href="/components/component07" underline="hover">
            Component07
          </Link>
        </li>
        <li>
          <Link href="/components/component08" underline="hover">
            Component08
          </Link>
        </li>
        <li>
          <Link href="/components/component09" underline="hover">
            Component09
          </Link>
        </li>
        <li>
          <Link href="/components/component10" underline="hover">
            Component10
          </Link>
        </li>
        <li>
          <Link href="/components/component11" underline="hover">
            Component11
          </Link>
        </li>
        <li>
          <Link href="/components/component12" underline="hover">
            Component12
          </Link>
        </li>
        <li>
          <Link href="/components/component13" underline="hover">
            Component13
          </Link>
        </li>
        <li>
          <Link href="/components/component14" underline="hover">
            Component14
          </Link>
        </li>
      </ul>
    </div>
  );
};

export default Components;