버전: 11.x

Next.js 통합

비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

Next.js를 사용하면 클라이언트와 서버를 단일 코드베이스에서 함께 구축하기 쉽습니다. tRPC는 양측 간 타입 공유를 간편하게 만들어 애플리케이션 데이터 페칭의 타입 안정성을 보장합니다.

저희 Next.js 통합은 React Query 통합을 기반으로 Next.js 전용 API를 추가해 클라이언트/서버 측 렌더링을 모두 처리합니다.

Next.js 통합을 사용하면 다음과 같은 기능을 활용할 수 있습니다:

서버 사이드 렌더링 - tRPC로 서버에서 페이지를 렌더링한 후 클라이언트에서 하이드레이션할 수 있습니다. 이렇게 하면 초기 로딩 상태는 피할 수 있지만, 첫 바이트까지의 시간은 서버 처리에 의해 차단됩니다. 자세한 내용은 서버 사이드 렌더링에서 확인하세요.
정적 사이트 생성 - 서버에서 쿼리를 미리 가져와 즉시 제공 가능한 정적 HTML 파일을 생성합니다. 자세한 내용은 정적 사이트 생성에서 확인하세요.
자동 프로바이더 래핑 - @trpc/next는 필요한 프로바이더로 앱을 감싸는 고차 컴포넌트(HOC)를 제공해 수동 설정이 필요 없습니다.

팁

새 프로젝트에서 tRPC를 사용하는 경우 참고용 예제 프로젝트를 활용해 보세요: tRPC 예제 프로젝트