Next.js 통합
tRPC + Next.js
Next.js를 사용하면 하나의 코드베이스에서 클라이언트와 서버를 함께 구축하기 쉽습니다. tRPC는 이 둘 사이의 타입 공유를 간소화하여 애플리케이션의 데이터 가져오기에 타입 안전성을 제공합니다.
tRPC는 App Router와 Pages Router 모두에 대해 1급 지원을 제공합니다. 프로젝트에 맞는 가이드를 선택하세요:
App Router
새로운 Next.js 프로젝트에 권장되는 접근 방식입니다. React Server Components, fetch 어댑터, 그리고 @trpc/tanstack-react-query를 사용합니다.
주요 기능:
- Server Components - 서버에서 데이터를 미리 가져오고 클라이언트로 스트리밍합니다
- 스트리밍 - 최적의 로딩 성능을 위해 Next.js 스트리밍을 활용합니다
- Suspense - 로딩 상태를 위해 Suspense 경계와 함께
useSuspenseQuery를 사용합니다
Pages Router
Pages Router의 데이터 가져오기 패턴을 위한 고차 함수(HOC)와 통합된 훅을 제공하는 @trpc/next를 사용합니다.
주요 기능:
- 서버 사이드 렌더링 - 서버에서 페이지를 렌더링하고 클라이언트에서 하이드레이션합니다. SSR에 대해 자세히 알아보세요.
- 정적 사이트 생성 - 서버에서 쿼리를 미리 가져오고 정적 HTML 파일을 생성합니다. SSG에 대해 자세히 알아보세요.
- 자동 Provider 래핑 -
@trpc/next는 필요한 프로바이더로 앱을 자동으로 래핑하는 HOC를 제공합니다.
App Router와 Pages Router 선택
| App Router | Pages Router | |
|---|---|---|
| 권장 대상 | 새로운 프로젝트 | 기존 Pages Router 프로젝트 |
| 데이터 가져오기 | Server Components, prefetchQuery | getServerSideProps, getStaticProps, HOC를 통한 SSR |
| 서버 어댑터 | Fetch 어댑터 | Next.js 어댑터 |
| 클라이언트 패키지 | @trpc/tanstack-react-query | @trpc/next + @trpc/react-query |
| Provider 설정 | 수동 QueryClientProvider + TRPCProvider | withTRPC() HOC를 통한 자동 설정 |
팁
새로운 프로젝트를 시작하는 경우 App Router를 권장합니다. 기존 Pages Router 프로젝트가 있는 경우, Pages Router 통합은 잘 작동하며 완전히 지원됩니다.