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.

Nuestra integración de Next.js se construye sobre nuestra Integración de React Query con algunas API específicas de Next.js, para manejar tanto el renderizado del lado del cliente como del servidor.

Al usar la integración con Next.js, obtendrás las siguientes características:

• Renderizado del lado del servidor - Puedes indicar a tRPC que renderice tus páginas en el servidor y luego hidratarlas en el cliente. Así evitarás un estado inicial de carga, aunque el tiempo hasta el primer byte dependerá del servidor. Más información sobre Renderizado del lado del servidor.

• Generación de sitios estáticos - Prefetch de consultas en el servidor y generación de archivos HTML estáticos listos para servir. Más información sobre Generación de sitios estáticos.

• Envoltorio automático de proveedores - @trpc/next proporciona un componente de orden superior (HOC) que envuelve tu aplicación con los proveedores necesarios, evitando que tengas que hacerlo manualmente.

consejo

Si estás usando tRPC en un nuevo proyecto, considera utilizar alguno de los proyectos de ejemplo como referencia: Proyectos de ejemplo de tRPC