Next.js Dynamic Routing 관련 질문

Next.js에서 Dynamic Routing을 사용하여 페이지를 로드하려면 먼저 페이지를 정의해야 합니다. 제가 이해한 바로는 `/pages/post-detail/[id].tsx` 파일이 비어 있거나 잘못된 코드를 포함하고 있는 것 같습니다. ```javascript import PostDetailPage from '@/pages/post-detail'; export default PostDetailPage; ``` 위 코드는 '/pages/post-detail' 경로에 있는 'PostDetailPage' 컴포넌트를 불러와서 기본으로 내보내는 과정인데요, 만약 '/pages/post-detail/index.tsx' 파일이 없거나 해당 파일에 'PostDetailPage'라는 기본 내보내기(default export)가 정의되어 있지 않다면 위와 같은 에러 메시지가 발생할 수 있습니다. 따라서 제 생각에는 다음 두 가지 가능성이 있겠습니다: 1) '/pages/post-detail/index.tsx' 파일이 존재하지 않아서 발생하는 문제입니다. 2) 'PostDetailPage'라고 하는 컴포넌트 혹은 함수가 '/pages/post-detail/index.tsx' 파일에서 기본 내보내기되고 있지 않아서 발생하는 문제입니다. 게다가 './pages/post-write.tsx'와 같은 파일들이 정상 작동한다면, 아마도 `./pages/post-[something]` 의 특징적인 패턴 때문일 수도 있겠습니다. Next.js는 이런 패턴을 통해 동적 이동을 다루는 방법을 파악하고 있습니다. 따라서 `./pages/post-detail/[id].tsx` 라는 파일 이름 대신에 `./pages/post/write.tsx` 또는 `./pages/post/detail/[id].tsx`와 같은 구조를 사용할 수 있습니다. 이것은 Next.js가 파일/폴더 구조를 기반으로 라우팅을 생성하기 때문입니다. 그런데 여기서 주의해야 할 점이 하나 있습니다. 위에서 언급한 `./pages/post/detail/[id].tsx`와 같은 경로 중 `[id]` 부분은 실제 id 값을 지정하는 것이 아닌, placeholder의 역할을 합니다. 따라서 이 위치에 동적으로 변경되는 각각의 포스트 id가 올 수 있도록 해야 합니다.