Closed3

【Next.js】ページ遷移方法2種

hirohiro

何について書く?

  • Next.js ページ遷移方法2種とNG例

内容

  • Linkを使用(最良の方法)
import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home
  • Routeを使用
import Router from 'next/router'

const handler = (path) => {
  Router.push(path)
}

export default () => (
    <button onClick={()=>handler('/about')}>Click </button>
)
  • <a>タグ使用NGパターン

export default () => (
    <a href='about'>Click </a>
)

- すべて同じ/aboutへアクセスするが、NGパターンの<a>を使用した場合、全て更新を行ってしまいNEXTの良さがなくなってしまう。 最良の方法をLinkとしたのは、Route.pushがこのメソッドは next/link では不十分な場合に役立つと記載が公式にあったためまずはLinkを使用するべきと判断した。

  • この不十分な場合について、今後深堀りしてこちらの記事を更新していく予定。

参考サイト

このスクラップは2022/04/17にクローズされました