Next.jsでLinkを使わずにページ遷移する方法

Next.jsでaタグやLinkを使わずに、Next.jsでページ遷移する方法を紹介します。

Next.jsのようなフロントのフレームワークを使っていると、 処理した後にページ遷移させるみたいな処理をかませることが多くなります。

そこで、Routerという機能を使ってページ遷移する方法を紹介します。 とても簡単で下記のようにuseRouterを使って、pushするだけでページ遷移ができてしまいます。

今回の例だと、router.push("/about")の部分になります。 これをすることで、/aboutのページに遷移することができます。

import { useRouter } from "next/router";

export default function IndexPage() {
  const router = useRouter(); //useRouterフックを定義して
  return (
    <div>
      Hello World.{" "}
      <button onClick={() => router.push("/about")}> // router.pushで遷移したいページを指定するだけ
        go to about
      </button>
    </div>
  );
}

実際に動かしてみたい方は下記もご覧になってください。

参考:useRouter