Блог

Я новичок в 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  

в чем разница, если я вызываю страницу с обычным тегом «a» или использую ссылку / маршрутизатор для достижения того же?

Основное различие между обычным <a> тегом и next/link or next/router заключается в том, что последние два используются для переходов на стороне клиента. Таким образом, обычный <a> тег загрузит / перейдет на страницу с HTTP-запросом, в то время как маршрутизатор и ссылка с загрузкой страницы на стороне клиента.

Вы можете использовать next/router (внутри функции в вашем компоненте), когда next/link этого недостаточно, например, если вам нужно выполнить некоторые операции перед визуализацией нового компонента.

Таким образом, и маршрутизатор, и ссылка имеют схожее поведение, вы можете выбрать, в зависимости от того, что нужно делать вашему приложению, какой из них использовать.

Оба будут запускать методы выборки данных ( getServerSideProps , getStaticProps и getInitialProps )

Ссылка — это просто абстракция для маршрутизатора, использовать Link компонент намного проще, чем каждый раз создавать ссылку вручную.