1. 개념 요약

• Next.js에서 Page Router와 App Router는 페이지, 레이아웃, 컴포넌트에 전달되는 파라미터가 다르다.
• Page Router는 props를 통해 데이터를 받고, App Router는 함수 파라미터로 params와 searchParams를 직접 받는다.
• 일반 컴포넌트는 부모가 전달한 props만 받는다.

2. 배경 지식

• Page Router: pages/ 기반, getStaticProps 등에서 받은 props를 페이지 컴포넌트에 전달
• App Router: app/ 기반, page.tsx와 layout.tsx가 직접 함수 파라미터로 params, searchParams 받음
• 일반 컴포넌트: 부모가 넘겨준 props만 받음

React 기본 문법 (Parameter)

3. 상세 설명

3-1. Page Router 페이지 컴포넌트

// pages/posts/[id].tsx
export async function getStaticProps({ params }) {
  return { props: { id: params.id } };
}

export default function PostPage({ id }) {
  return <div>Post ID: {id}</div>;
}

• params는 getStaticProps에서 받고, 페이지 컴포넌트는 props 형태로 전달받음