Next.jsでのブラウザバック時の状態保持

Next.jsでWebアプリを開発する際、ブラウザバックを行ったときに状態を保持することは、ユーザー体験を向上させる重要な要素です。この記事では、Next.jsでブラウザバック時に状態を保持するための具体的な方法を紹介します。

useRouterとbeforePopStateの活用

Next.jsのuseRouterフックを使うことで、ブラウザの戻る操作に対して適切な処理を行うことができます。特にbeforePopStateメソッドを使えば、ブラウザバック時にカスタムのロジックを追加することが可能です。

import { useRouter } from 'next/router';
const PageComponent = () => {
  const router = useRouter();
  useEffect(() => {
    const handlePopState = () => {
      // 状態を保持するためのカスタムロジック
      const confirmed = window.confirm('戻りますか？');
      if (!confirmed) {
        router.push(router.asPath); // URLを保持
      }
    };
    router.beforePopState(handlePopState);
    return () => router.beforePopState(() => true);
  }, [router]);
  return <div>コンテンツ</div>;
};

これにより、ブラウザバック時に確認ダイアログを表示し、ユーザーが誤って状態を失わないようにできます。

RecoilやsessionStorageを使った状態管理

Next.jsでは、Reactの状態管理ライブラリであるRecoilや、ブラウザのsessionStorageを使用して、ページをまたいでも状態を保持できます。特にRecoilSyncを使うと、状態を外部ストレージに簡単に同期させ、ブラウザバック時にその状態を復元することができます。

import { atom, useRecoilState } from 'recoil';
const countState = atom({
  key: 'countState',
  default: 0,
});
const CounterComponent = () => {
  const [count, setCount] = useRecoilState(countState);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

sessionStorageを使う場合も、状態を一時的に保存し、ページ遷移やブラウザバック時にそのデータを復元することが可能です。

URLパラメータで状態を管理

UIの状態（例えばモーダルの開閉状態など）をブラウザバック時にも保持したい場合、URLに状態を含める方法が有効です。これにより、ユーザーがページ遷移を行っても、特定の状態をURLパラメータから復元できます。

const ModalPage = () => {
  const router = useRouter();
  const [isOpen, setIsOpen] = useState(false);
  useEffect(() => {
    if (router.query.modal === 'open') {
      setIsOpen(true);
    }
  }, [router.query]);
  const openModal = () => {
    router.push('/page?modal=open');
    setIsOpen(true);
  };
  return (
    <div>
      {isOpen && <div>モーダルの内容</div>}
      <button onClick={openModal}>モーダルを開く</button>
    </div>
  );
};

URLにモーダルの状態を反映させることで、ブラウザバック時にもUIの状態を維持できます。

まとめ

Next.jsでブラウザバック時に状態を保持するには、useRouterや状態管理ライブラリを駆使することが重要です。また、URLパラメータやsessionStorageを活用することで、UIやフォームの状態をユーザーがブラウザバックした際に復元でき、よりシームレスなユーザー体験を提供できます。