Как правильно ориентироваться в nextjs

idk это довольно просто или что, но с трудом понимаю это. вот один родительский div, обернутый тегом nextjs Link (который направляет меня к маршруту /playing), и в этом div у меня есть еще один тег, который может направить меня на страницу входа. вот проблема, когда я нажимаю на логин, он переходит на первую страницу /playing, а затем направляет меня на /login, как правильно ее решить. я хочу перейти к /playing, щелкнув весь div и

  <Link href="/playing">
        <div className="px-20 w-full">
          <h1 onClick={() => router.push(`/login`)} className="hover:underline">
            Login
          </h1>
        </div>
      </Link>