next/linkとnext/routerを理解する

目的

Next.jsの内部リンクの最適解を考えたい

リンクの種類

next/link

Linkコンポーネントをimportして使用する

import Link from "next/link";

// 省略
  <Link href="/">Back to home</Link>

aタグの場合は遷移先ページのhtmlファイルを取得して描画する。Linkコンポーネントの場合はクライアントサイドで新しいページを描画する。prefetchのため、ページ遷移が高速となる。
nextjs.org

useRouter

routerオブジェクトを作成し、変化を与えることで遷移する。

import { useRouter } from "next/router";

export const Page = () => {

  const router = useRouter();
  const linkToHome = () => {
    router.push("/");
  };

  return (
    <button onClick={linkToHome} className="bg-orange-500">
      Back to home
    </button>
  )
}

またrouterオブジェクトには様々な定義があり利用できる。
nextjs.org

Router

useRouterと類似点は多いが、Routerはフックではなくグローバル変数。画面遷移による不要な再描画が起きない。

LinkコンポーネントとuseRouterの使い分け

単純なクライアント側のページ遷移であればどちらでも違いは無い。
useRouterを使用すると、例えば関数内でルーティングを設定する場合に遷移前に処理を挟むことができるなど、より柔軟な扱いが可能になる。

感想

ちゃんと整理してみると、意外とシンプルだった。
プロジェクト内でリンク設定方法を統一していくのを考えると、useRouterを使用するのが良いと思う。
routerオブジェクトを使用することで、様々な扱い方ができることを知れてよかった。

参照

maku.blog
almonta2021blog.com
commte.net