[Next.js] - Routing UI

Link

import Link from "next/link";
import { useRouter } from "next/router";

function index() {
  const arr = [1, 2, 3, 4];
  const router = useRouter();
  const current = router.pathname;

  console.log(router);
  return (
    <div>
      <Link href={"/"} scroll={false}>
        <a>
          <h3>Home</h3>
        </a>
      </Link>
    </div>
  );
}

export default index;

❗️Link Pre-fetching

---

• <Link/> 컴포넌트로 페이지가 연결되어있을 때 Next.js는 기본적으로 연결된 컴포넌트의 데이터를pre-fetching한다

• <Link/> 로 연결된 컴포넌트끼리는 추가적인 Network 통신이 없음 (아마도..?)

Router.push

import Link from "next/link";
import { useRouter } from "next/router";

function index() {
  const arr = [1, 2, 3, 4];
  const router = useRouter();
  const current = router.pathname;

  console.log(router);
  return (
    <div>
      <button onClick={() => router.push(`${current}/${v}`)}>{v}</button>
    </div>
  );
}

export default index;

• router.push : 현 위치까지 유지한 -> 다음 경로를 push

• router.replace : 현위치 다음 지정경로로 대체

❗️ [dynamicRouting] :

• 개별 pathname을 가지지 않고 query의 일부

• practice/4 위치에서 console.log(router.pathname)을 하면

/practice/[keyId]

• router.push