파일 기반 라우팅(2)

1. Link 컴포넌트

• 페이지간의 탐색을 CSR으로 진행 할 수 있음
• 코드 예시

import Link from "next/link";

export default function Client() {
  // 고객 리스트
  const clients = [
    { id: 1, name: "Max" },
    { id: 2, name: "Anna" },
    { id: 3, name: "Tom" },
  ];

  return (
    <div>
      <h1>Client</h1>
      <ul>
        {clients.map((client) => (
          <li key={client.id}>
            <Link href={`/client/${client.id}/${client.name}`}>
              {client.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );

Link href를 사용해서 라우팅 할 수 있다.

import Link from "next/link";

function ClientsPage() {
  const clients = [
    { id: 1, name: "Max" },
    { id: 2, name: "Anna" },
    { id: 3, name: "Tom" },
  ];

  return (
    <div>
      <h1>ClientsPage</h1>
      <ul>
        {clients.map((client) => (
          <li key={client.id}>
            <Link
              href={{ pathname: "/clients/[id]", query: { id: client.id } }}
            >
              {client.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default ClientsPage;

Link href 안에 pathname을 지정하여 경로를 정해주고, query를 지정해줄 수도 있다.

2. router.push

• router.push로 Link 컴포넌트를 프로그램화 할 수 있음
• 코드 예시

import { useRouter } from "next/router";

function ClientProjectPage() {
  const router = useRouter();
  console.log(router.query);

  function loadProjectHandler() {
    // router.push("/clients/max/projecta");
    // router.replace("/clients/max/projecta");
    router.push({
      pathname: "/clients/[id]/[clientid]",
      query: { id: "max", clientid: "projecta" },
    });
  }
  return (
    <div>
      <h1>ClientProjectPage</h1>
      <button onClick={loadProjectHandler}>Load Project A</button>
    </div>
  );
}
export default ClientProjectPage;

3. 404페이지

• pages 폴더 안에 404.js 파일을 생성
• 코드 예시

// 404.js
function NotFoundPage() {
  return (
    <div>
      <h1>Page Not Found</h1>
    </div>
  );
}

export default NotFoundPage;