3단계: 페이지 라우팅과 동적 URL 처리

pages/
  index.js      → /
  about.js      → /about
  contact.js    → /contact

// pages/about.js
export default function About() {
  return <h1>소개 페이지입니다</h1>;
}

import Link from 'next/link';

<Link href="/about">About</Link>

pages/post/[id].js → /post/123, /post/hello

// pages/post/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>포스트 ID: {id}</h1>;
}

pages/category/[category]/[id].js

// pages/category/[category]/[id].js
import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();
  const { category, id } = router.query;

  return (
    <div>
      <h1>카테고리: {category}</h1>
      <h2>ID: {id}</h2>
    </div>
  );
}

// pages/404.js
export default function NotFound() {
  return <h1>페이지를 찾을 수 없습니다.</h1>;
}

// pages/_error.js
function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `${statusCode} 서버 오류가 발생했습니다.`
        : '클라이언트 오류가 발생했습니다.'}
    </p>
  );
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res?.statusCode || err?.statusCode || 404;
  return { statusCode };
};

export default Error;