[Next.js] UseRouter

Link가 있는데 왜 쓰는가?
👉 추가적인 기능들을 사용하기 위하여

✅ 사용 방법

useRouter를 포함하여 use~는
Client Component에서만 사용할 수 있으니 'use client'선언을 해주자.

기존의 큰 파일은 보통 Server Component이기 때문에 따로 useRouter를 위한 파일을 만들어준다.

"use client";

import { useRouter } from "next/navigation";

export default function DetailLink() {
	let router = useRouter();
	return (
		<button
			onClick={() => {
				router.push("/");
			}}
		>
			버튼
		</button>
	);
}

그리고 router를 사용할 기존의 Server Component에서 컴포넌트를 import하여 사용한다.
여기선 <DetailLink /> 컴포넌트를 import 하였다.

import { connectDB } from "@/util/database";
import Link from "next/link";
import DetailLink from "./DetailLink";

export default async function List() {
	const client = await connectDB;
	const db = client.db("forum");
	let result = await db.collection("post").find().toArray();

	return (
		<div className="list-bg">
			{result.map((e, i) => {
				return (
					<div className="list-item" key={i}>
						<Link href={"/detail/" + result[i]._id}>
							<h4>{e.title}</h4>
						</Link>
						<p>{e.content}</p>
						<DetailLink />
					</div>
				);
			})}
		</div>
	);
}

✅ useRouter의 여러가지 기능들

'use client'

import {useRouter} from 'next/navigation'

export default function DetailLink(){
  let router = useRouter()
  return (
    <button onClick={()=>{ router.push('/') }}>버튼</button>
  )
}

1. router.push('/~') : 해당 경로로 페이지 이동

2. router.back() : 뒤로 가기

3. router.forward() : 앞으로 가기

4. router.refresh()** : 바뀐 부분만 새로고침

5. router.prefetch('/~') : /~의 경로를 미리 로드해준다.(빠른 이동 가능)
   Link에 기본적으로 prefetch 속성이 있기 때문에 Server Component에서도 prefetch할 수 있다.
   만약 prefetch 속성을 끄고 싶다면(화면에 너무 많은 Link가 있거나 하는 경우)

<Link href={'/~'} prefetch={false}>링크</Link>