Intégration Next.js

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

tRPC ❤️ Next.js

Next.js simplifie la création conjointe d'un client et d'un serveur dans une seule base de code. tRPC facilite le partage des types entre eux, garantissant la sécurité typique pour le fetching de données de votre application.

Notre intégration Next.js est construite sur notre intégration React Query avec des APIs spécifiques à Next.js, pour gérer à la fois le rendu côté client et côté serveur.

Avec l'intégration Next.js, vous bénéficierez des fonctionnalités suivantes :

• Server-side rendering - Vous pouvez demander à tRPC de pré-rendre vos pages côté serveur, puis de les hydrater côté client. Ainsi, vous éviterez un état de chargement initial, bien que le time to first byte soit conditionné par le serveur. En savoir plus sur le Server-side rendering.

• Static site generation - Préfetchez les requêtes côté serveur et générez des fichiers HTML statiques prêts à être servis. En savoir plus sur la Static site generation.

• Automatic Provider Wrapping - @trpc/next fournit un composant d'ordre supérieur (HOC) qui encapsule votre application avec les providers nécessaires, vous évitant de le faire manuellement.

astuce

Si vous utilisez tRPC dans un nouveau projet, consultez nos projets d'exemple comme référence : tRPC Example Projects