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

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

どちらの方法もbeforeページで「Afterに移動」ボタンをクリックするとafterに遷移可能ですが、afterのURLに直接アクセスしたりF5とかでページをリロードした場合は404を表示するようにしています。

router.pushを使用する

import { useRouter } from "next/router";

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

  const goAfter = () => {
    router.push({
      pathname: '/after',
      query: { display: 'ok' }
    },
    'after'
  )}

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

export default Before;

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

const After = () => {
  const router = useRouter();
  const [isDisplay, setIsDisplay] = useState('');
  
  useEffect(() => {
    if (router.isReady) {
      if (router.query.display === 'ok') {
        setIsDisplay(router.query.display );
      } else {
        router.push('/404');
      }
    }
  }, [router.isReady]);
  
  return (
    <>
      {isDisplay && (<h1>After</h1>)}
    </>
  );

}

export default After;

1つ目の方法はrouter.pushです。

beforeからrouter.pushでafterに遷移する際にパラメータdisplayを渡しています。

afterではパラメータをチェックしてパラメータがなかったりした場合は404を表示しています。

beforeでrouter.pushをする際にasというオプションでブラウザのアドレスバーに表示されるURL（今回の場合はafter）を指定しています。

これをしないとブラウザのアドレスバーには/after?display=okと表示され、ページのリロードやURLをコピペからの直打ちが可能となってしまいます。

asオプションを指定することでアドレスバーには/afterと表示されるのでページのリロードやURLの直打ちを防ぐことができます。

router.pushの仕様については公式ページをご覧ください。

localStorageを使用する

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;

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

const After = () => {
  const router = useRouter();
  const [isDisplay, setIsDisplay] = useState(false);
  
  useEffect(() => {
    if (localStorage.getItem('display') === 'ok') {
      setIsDisplay(true);
      localStorage.removeItem('display');
    } else {
      router.push('/404');
    }
  }, []);
  
  return (
    <>
      {isDisplay && (
        <h1>After</h1>
      )}
    </>
  );

}

export default After;

2つ目の方法ではlocalStorageを使用します。

遷移する前にlocalStorageに値「display」を保存し、afterではuseEffectでlocalStorageの「display」の値をチェックして値がok以外の場合は404を表示して、値がokの場合はその直後にlocalStorageから「display」を削除してページのリロードやURL直打ちを防いでいます。

ただ、useEffectは画面が描画された後で実行されるので、useStateのisDisplayを使うことで404が表示される前に一瞬だけ画面が表示されることを防いでいます。

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村