Next.js で画面サイズを取得する方法 - インフラジスティックス・ジャパン株式会社Blog

f:id:jack1213:20211130190719j:plain

こんにちは！ソリューションコンサルタントの滝元です。

本記事では、Next.jsで動的に画面サイズを取得するHooksをご紹介します。

レイアウトの調整にはFlexboxやCSS Gridを使用することが多いと思います。しかし、コンポーネントのレイアウトを実装するときにどうしてもウィンドウサイズから計算しなければならない場合もあります。そういった場合に使用できるHooksをご紹介させていただきます。

Hooksの実装

GetWindowSize.ts

import { useEffect, useState } from "react";

export const getWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    if (typeof window !== "undefined") {
      const handleResize = () => {
        setWindowSize({
          width:
           window.innerWidth,
          height: window.innerHeight,
        });
      };

      window.addEventListener("resize", handleResize);
      handleResize();
      return () => window.removeEventListener("resize", handleResize);
    } else {
      return;
    }
  }, []);
  return windowSize;
};

Next.js はPre-redndering(SSR,SSG)がサポートされているので、 Hooksでブラウザ側にしか存在しないグローバルオブジェクトのwindowやdocumentを参照する場合には必ず

if (typeof window !== "undefined") {

を実装するようにしましょう。

使い方

index.tsx

import type { NextPage } from "next";
import { getWindowSize } from "../hooks/GetWindowSize";

const Home: NextPage = () => {
  const { height, width } = getWindowSize();
  return (
    <div>
      height:{height} width:{width}
    </div>
  );
};

export default Home;