Integración con Next.js

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

tRPC + Next.js

Next.js facilita la construcción de cliente y servidor en una misma base de código. tRPC simplifica el compartir tipos entre ambos, garantizando la seguridad de tipos para la obtención de datos de tu aplicación.

tRPC ofrece soporte de primera clase tanto para App Router como para Pages Router. Elige la guía que coincida con tu proyecto:

App Router

Enfoque recomendado para nuevos proyectos de Next.js. Utiliza React Server Components, el fetch adapter y @trpc/tanstack-react-query.

Características clave:

• Server Components - Precarga datos en el servidor y los transmite al cliente

• Streaming - Aprovecha el streaming de Next.js para un rendimiento de carga óptimo

• Suspense - Usa useSuspenseQuery con límites de Suspense para estados de carga

Comenzar con App Router →

Pages Router

Utiliza @trpc/next que proporciona un componente de orden superior (HOC) y hooks integrados para los patrones de obtención de datos de Pages Router.

Características clave:

• Renderizado en servidor - Renderiza páginas en el servidor y las hidrata en el cliente. Más información sobre SSR.

• Generación de sitios estáticos - Precarga consultas en el servidor y genera archivos HTML estáticos. Más información sobre SSG.

• Envoltura automática de providers - @trpc/next proporciona un HOC que envuelve tu aplicación con los proveedores necesarios automáticamente.

Comenzar con Pages Router →

Elección entre App Router y 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

consejo

Si comienzas un nuevo proyecto, recomendamos App Router. Si tienes un proyecto existente con Pages Router, su integración funciona bien y tiene soporte completo.