reactjs - NextJS におけるルーターとリンクの典型的な違い

Question

私はNextJSが初めてです。next/router と next/link の典型的なバリエーションと使用例を知りたいです。

さまざまなシナリオでどちらを使用する必要がありますか? どれが何をしますか？たとえば、共有コンポーネントをロードしたり、サーバー側でレンダリングされたページ間を移動したりしたい場合。また、通常の「a」タグでページを呼び出すか、リンク/ルーターを使用して同じことを達成すると、どのような違いがありますか。

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.pathname === href ? 'red' : 'black',
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink

import Link from 'next/link'

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

export default Home