Next.js で画面サイズを取得する方法

本記事では、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;

まとめ

Next.jsでウィンドウサイズを取得したいときにはWindow: resize イベントを利用したHooksを実装する！
ただし、windowがundefinedの可能性があることに注意！