Next.js App Router에서 페이지를 조립만 하게 만들기

서버 컴포넌트 시대가 되면서 예전 버릇대로 페이지 파일에 데이터 조회를 다 때려넣게 된다. 처음엔 편한데, 페이지가 다섯 개를 넘어가는 순간 같은 Prisma 쿼리가 세 군데서 복붙되기 시작했다.

그래서 규칙을 하나 정했다. 페이지는 조립만 한다.

구조

src/
├── app/           # 페이지 = 쿼리 호출 + 컴포넌트 배치
├── components/    # ui / feed / post ...
├── hooks/         # 클라이언트 훅
└── lib/
    ├── queries/   # 모든 DB 조회
    └── actions/   # 서버 액션 (뮤테이션)

서버 컴포넌트에는 React 훅이 못 들어간다. 그래서 클라이언트의 커스텀 훅에 해당하는 게 서버에선 쿼리 레이어다. 페이지는 이렇게 끝난다.

export default async function TagPage(props: PageProps<"/tags/[tag]">) {
  const { tag } = await props.params;
  const items = await getTagFeed(tag);
  return <FeedList items={items} />;
}

매퍼도 공용화

피드·검색·태그 페이지가 전부 같은 카드 모양을 그린다면, DB 모델 → 뷰 모델 변환도 한 곳에 있어야 한다.

export function toFeedItem(p: PostWithRels): FeedItem {
  return {
    kind: "native",
    title: p.title,
    url: `/@${p.author.handle}/${p.slug}`,
    // ...
  };
}

이거 하나로 세 페이지의 중복이 사라졌다. 페이지 파일에 prisma. 가 보이면 리팩터링 신호라고 생각하면 된다.