本日は、next/routerの関数についての軽いメモです🏃🏻‍♂️

関数たち

push

任意の画面に遷移するために使用します。next/linkによる実装が不十分な時などに使用できます。

router.push(url, as, options)

replace

機能的にはpushと同じですが、replaceは遷移時、ブラウザの履歴スタックに追加されません。

router.replace(url, as, options)

prefetch

次の画面の表示を高速化するために、プリフェッチします。ちなみに、next/linkを使っている場合は、プリフェッチが自動的に行われているそうです.

router.prefetch(url, as)

back

一つ前の履歴スタックに戻ります。ブラウザで戻るボタンを押したのと同じ挙動です。

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.back()}>
      Click here to go back
    </button>
  )
}

reload

現在のページをリロードします。ブラウザの更新ボタンを押したのと同じ挙動です。

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.reload()}>
      Click here to reload
    </button>
  )
}