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.

tRPC offre un support de première classe pour le App Router et le Pages Router. Choisissez le guide correspondant à votre projet :

App Router

Approche recommandée pour les nouveaux projets Next.js. Utilise les React Server Components, l'adaptateur fetch et @trpc/tanstack-react-query.

Fonctionnalités clés :

• Server Components - Préchargez les données sur le serveur et transmettez-les au client

• Streaming - Exploitez le streaming Next.js pour des performances de chargement optimales

• Suspense - Utilisez useSuspenseQuery avec les limites Suspense pour les états de chargement

Commencer avec App Router →

Pages Router

Utilise @trpc/next qui fournit un composant d'ordre supérieur (HOC) et des hooks intégrés pour les modèles de récupération de données du Pages Router.

Fonctionnalités clés :

• Server-side rendering - Générez les pages sur le serveur et hydratez-les sur le client. En savoir plus sur la SSR.

• Static site generation - Préchargez les requêtes sur le serveur et générez des fichiers HTML statiques. En savoir plus sur la SSG.

• Automatic Provider Wrapping - @trpc/next fournit un HOC qui encapsule votre application avec les providers nécessaires automatiquement.

Commencer avec Pages Router →

Choisir entre App Router et 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

astuce

Si vous démarrez un nouveau projet, nous vous recommandons App Router. Si vous avez un projet existant avec Pages Router, l'intégration Pages Router fonctionne parfaitement et est entièrement prise en charge.