Next.jsでURLの直打ちとページリロードを防ぐ方法

Next.jsで同じサイト内のボタンとかリンクを押して遷移するのはOKでもURLを直打ちやページのリロードは防ぎたいことがあったのでその方法です。

ちょっと強引です。

before.tsx

import { useRouter } from "next/router";

const Before = () => {
  const router = useRouter();
  
  const goAfter = () => {
    localStorage.setItem('display', 'ok');
    router.push('/after');
  }

  return (
    <>
      <h1>Before</h1>
      <button onClick={goAfter}>Afterに移動</button>
    </>
  );
}

export default Before;

after.tsx

import { useRouter } from "next/router";
import { useEffect } from "react";

const After = () => {
  const router = useRouter();

  useEffect(() => {
    if (localStorage.getItem('display') != 'ok') {
      router.push('/before');
    }
    localStorage.removeItem('display');
  }, []);

  return (
    <h1>After</h1>
    );
  }

export default After;

before.tsxのボタン「Afterに移動」をクリックするとページ遷移しますが、遷移する前にlocalStorageに値「display」を保存し、

after.tsxではuseEffectでlocalStorageの「display」の値をチェックして値がなかったり異なっていたらbeforeに遷移して、

値があった場合はその直後にlocalStorageから「display」を削除してページのリロードやURL直打ちを防いでいます。

ただ、useEffectは画面が描画された後で実行されるので一瞬afterが表示された後にbeforeに遷移するのであまりスマートではないです。