Next.jsでuseRouterを使ってページ遷移する！

はじめに

これからNext.jsでuseRouterというものを使ってページ遷移する方法について説明します。
とても簡単なので使う機会があればぜひ参考にしてください！

やり方

今回はボタンを押したらページ遷移するものを作ります。
まず、ページ遷移させるボタンが記述されているファイルの上にuseRouterをインポートしてください。

import { useRouter } from 'next/router'

次にコンポーネントの中でuseRouterを呼び出してrouterオブジェクトを作ります。

  const router = useRouter();

ボタンを押したときに実行される関数handleClickを作ります。

  const handleClick = () => {
    
  }

ここで、 router.push('URL') でそのURL先にページ遷移させることが出来るのでhandleClick関数の中にrouter.pushを挿入します。

  const handleClick = () => {
    router.push('/new_page')
  }

今回はnew_pageという新しいページに遷移させます。
最後にJSXのボタンタグの中にonClickを使用して、ボタンを押したときにhandleClick関数が呼び出されるようにすれば完成です！

全体の流れは次のようになります。

import { useRouter } from 'next/router'

export default function Home() {
  const router = useRouter();

  const handleClick = () => {
    router.push("/new_page")
  }

  return (
    <main>
      <h1>これは最初のページです</h1>
      <button onClick={handleClick}>新しいページに遷移します</button>
    </main>
  )
}

完成したページはこんな感じになりました。

ボタンを押すと新しいページに遷移します。

最後に

これでuseRouteを使ってページ遷移させることが出来ました！
簡単にできたので是非使ってください！