Next.js 통합
이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →
tRPC + Next.js
Next.js를 사용하면 클라이언트와 서버를 단일 코드베이스에서 함께 구축하기 쉽습니다. tRPC는 양측 간 타입 공유를 간편하게 만들어 애플리케이션 데이터 페칭의 타입 안정성을 보장합니다.
tRPC는 App Router와 Pages Router 모두에 대해 최우선 지원을 제공합니다. 프로젝트에 맞는 가이드를 선택하세요:
App Router
새로운 Next.js 프로젝트를 위한 권장 접근 방식입니다. React Server Components, fetch 어댑터, @trpc/tanstack-react-query를 사용합니다.
주요 기능:
-
서버 컴포넌트 - 서버에서 데이터를 미리 가져와 클라이언트로 스트리밍
-
스트리밍 - 최적의 로딩 성능을 위해 Next.js 스트리밍 활용
-
서스펜스 - 로딩 상태에 Suspense 경계와 함께
useSuspenseQuery사용
Pages Router
Pages Router의 데이터 페칭 패턴을 위한 고차 컴포넌트(HOC)와 통합 훅을 제공하는 @trpc/next를 사용합니다.
주요 기능:
-
서버 사이드 렌더링 - 서버에서 페이지 렌더링 후 클라이언트에서 하이드레이션. SSR 자세히 보기.
-
정적 사이트 생성 - 서버에서 쿼리 미리 가져와 정적 HTML 파일 생성. SSG 자세히 보기.
-
자동 프로바이더 래핑 -
@trpc/next는 필요한 프로바이더로 앱을 자동으로 래핑하는 HOC를 제공합니다.
App Router와 Pages Router 선택 가이드
| App Router | Pages Router | |
|---|---|---|
| Recommended for | New projects | Existing Pages Router projects |
| Data fetching | Server Components, prefetchQuery | getServerSideProps, getStaticProps, SSR via HOC |
| Server adapter | Fetch adapter | Next.js adapter |
| Client package | @trpc/tanstack-react-query | @trpc/next + @trpc/react-query |
| Provider setup | Manual QueryClientProvider + TRPCProvider | Automatic via withTRPC() HOC |
신규 프로젝트라면 App Router를 권장합니다. 기존 Pages Router 프로젝트가 있다면 Pages Router 통합이 잘 작동하며 완벽히 지원됩니다.