nextjs-navigation-lcok

code ship from proxyProvider to a module.

Installtion

npm install @xuhaojun/nextjs-navigation-lock

Quickstart

import { RouteChangeProvider } from "@xuhaojun/nextjs-navigation-lock";

function Page({ children }) {
  return <RouteChangeProvider>{children}</RouteChangeProvider>;
}

import {
  useNavigationLock,
  Link,
  useRouter,
} from "@xuhaojun/nextjs-navigation-lock";

function Component() {
  const [isDirty, setIsDirty] = useState(false);
  useNavigationLock(isDirty);

  const router = useRouter();
  const handleLogin = () => {
    router.push("/");
  };
  return (
    <>
      <Link href="/users">Users</Link>
      <button onClick={handleLogin}>Login</button>
    </>
  );
}

Reference

1. Conditionally Block Navigation - nextjs - appDir