Next.jsの動的ページ遷移を高速化する為のサンプル

Linkコンポーネントを使う

遅いサンプル

        <button
          onClick={() => router.push(`/sample/${id}/edit`)}
        >
          Edit
        </button>

速いサンプル

        <Link href="/sample/[id]/edit" as={`/sample/${id}/edit`}>
          <button className="btn btn-warning btn-lg" href="#" role="button">
            Edit
          </button>
        </Link>

Router.pushで第二引数まで書く

遅いサンプル

    updateSample(sample).then(updatedSample => {
      Router.push(`/sample/${sample.id}`);
    });

速いサンプル

    updateSample(sample).then(updatedSample => {
      Router.push("/sample/[id]", `/sample/${sample.id}`);
    });