Next.js-integrering
Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →
tRPC + Next.js
Next.js gör det enkelt att bygga klient och server tillsammans i en kodbas. tRPC gör det enkelt att dela typer mellan dem, vilket säkerställer typesäkerhet för din applikations datahämtning.
tRPC erbjuder förstklassigt stöd för både App Router och Pages Router. Välj den guide som passar ditt projekt:
App Router
Rekommenderat tillvägagångssätt för nya Next.js-projekt. Använder React Server Components, fetch adapter och @trpc/tanstack-react-query.
Viktiga funktioner:
-
Server Components - Förhämtar data på servern och strömmar den till klienten
-
Streaming - Utnyttja Next.js streaming för optimal laddningsprestanda
-
Suspense - Använd
useSuspenseQuerymed Suspense-gränser för laddningstillstånd
Pages Router
Använder @trpc/next som tillhandahåller en högre ordningens komponent (HOC) och integrerade hooks för Pages Routers datahämtningsmönster.
Viktiga funktioner:
-
Server-side rendering - Renderar sidor på servern och hydrerar dem på klienten. Läs mer om SSR.
-
Static site generation - Förhämtar frågor på servern och genererar statiska HTML-filer. Läs mer om SSG.
-
Automatic Provider Wrapping -
@trpc/nexttillhandahåller en HOC som automatiskt omsluter din app med nödvändiga providers.
Valet mellan App Router och 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 |
Om du startar ett nytt projekt rekommenderar vi App Router. För befintliga Pages Router-projekt fungerar Pages Router-integrationen utmärkt och stöds fullt ut.