tRPC met Next.js App Router
Integreer tRPC naadloos in de Next.js App Router en benut servercomponents voor het efficiënt ophalen van gegevens.
tRPC met Next.js App Router is een gratis tRPC API's met typeveiligheid van begin tot eind-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject tRPC API's met typeveiligheid van begin tot eind. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus tRPC API's met typeveiligheid van begin tot eind bevat in totaal 4 lessen.
tRPC en Next.js App Router
Welkom in een nieuw tijdperk van webontwikkeling met de Next.js App Router! In deze les leer je hoe je tRPC in deze krachtige architectuur integreert.
De App Router introduceert nieuwe paradigma's, zoals servercomponenten en clientcomponenten. tRPC helpt je typeveiligheid van begin tot eind te behouden in deze verschillende renderomgevingen.
De basis van de App Router begrijpen
Voordat we dieper ingaan op tRPC, herhalen we kort de belangrijkste concepten van de App Router:
- Servercomponenten: Worden op de server gerenderd en zijn ideaal voor het ophalen van gegevens en statische inhoud. Ze hebben geen status of interactiviteit.
- Clientcomponenten: Worden op de client gerenderd en maken interactiviteit, status en browser-API's mogelijk. Je markeert ze met
'use client';.
tRPC speelt een belangrijke rol bij het typeveilig maken van het ophalen van gegevens, ongeacht of je in een server- of clientcomponent werkt.
De tRPC-adapter voor de App Router
Om tRPC met de Next.js App Router te integreren, gebruik je de adapter @trpc/next/app-router. Dit pakket biedt hulpprogramma's die specifiek voor deze omgeving zijn ontworpen.
De adapter verwerkt de bijzonderheden van het aanroepen van tRPC-procedures vanuit zowel servercomponenten (rechtstreekse aanroepen) als clientcomponenten (via React Query-hooks).
tRPC instellen aan de serverzijde
Eerst moet je je tRPC API-routes beschikbaar maken in de map app. Meestal houdt dit in dat je een route.ts-bestand maakt, bijvoorbeeld app/api/trpc/[trpc]/route.ts.
De adapter helpt je tRPC-server zo te configureren dat deze naadloos met Next.js API-routes werkt. Daarbij worden binnenkomende verzoeken verwerkt en naar je tRPC-procedures gerouteerd.
Gegevens ophalen in servercomponenten
Een van de grootste voordelen van de App Router is dat je gegevens rechtstreeks in servercomponenten kunt ophalen. Met tRPC betekent dit dat je backendprocedures kunt aanroepen zonder JavaScript aan de clientzijde.
Je maakt een speciale tRPC-client voor de serverzijde waarmee je procedures rechtstreeks kunt aanroepen, vergelijkbaar met het aanroepen van een functie, terwijl de typeveiligheid behouden blijft.
Demo: gegevens ophalen in een servercomponent
Zo haal je gegevens rechtstreeks met tRPC op in een Next.js-servercomponent, bijvoorbeeld app/page.tsx. Let erop dat hier geen hooks worden gebruikt.
// app/page.tsx (Server Component)
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '@/server/routers/_app'; // Your backend router type
// Create a server-side tRPC client for direct usage
const serverClient = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: 'http://localhost:3000/api/trpc', // Your tRPC API endpoint
}),
],
});
export default async function HomePage() {
// Fetch data directly in a Server Component
const greeting = await serverClient.example.hello.query({
text: 'from Server Component!'
});
return (
<div>
<h1>{greeting}</h1>
<p>This content is rendered on the server.</p>
</div>
);
}tRPC instellen aan de clientzijde
Voor clientcomponenten moet je nog steeds een tRPC-provider aan de clientzijde instellen. Meestal doe je dit in je hoofdindeling, bijvoorbeeld app/layout.tsx, door je app te omwikkelen met een 'use client';-component die de tRPC-client beschikbaar maakt.
Deze provider maakt de React Query-hooks van tRPC beschikbaar voor alle clientcomponenten.
Gegevens ophalen in clientcomponenten
In een clientcomponent gebruik je de React Query-hooks van tRPC, zoals useQuery voor het ophalen of useMutation voor het wijzigen van gegevens, net zoals in een traditionele React-app.
Vergeet niet om je component bovenaan het bestand te markeren met 'use client';, zodat het op de client wordt uitgevoerd.
Demo: gegevens ophalen in een clientcomponent
Dit voorbeeld toont een clientcomponent, bijvoorbeeld app/client-page/page.tsx, die gegevens ophaalt met de tRPC-hook useQuery. Deze component wordt aan de clientzijde gerenderd.
// app/client-page/page.tsx (Client Component)
'use client'; // Mark as a Client Component
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '@/server/routers/_app'; // Your backend router type
// Initialize tRPC client for React hooks
const trpc = createTRPCReact<AppRouter>();
export default function ClientPage() {
// Use tRPC hooks to fetch data on the client
const { data, isLoading, error } = trpc.example.hello.useQuery({
text: 'from Client Component!'
});
if (isLoading) return <p>Loading client data...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
<h1>{data}</h1>
<p>This data was fetched client-side with React Query.</p>
</div>
);
}Gegevens ophalen op de server of de client kiezen
Wanneer haal je gegevens op in een servercomponent en wanneer in een clientcomponent?
- Servercomponenten: Ideaal voor het eerste ophalen van gegevens, statische inhoud en gegevens waarvoor geen nieuwe ophaalactie of interactiviteit aan de clientzijde nodig is. Dit verkleint de bundelgrootte aan de clientzijde.
- Clientcomponenten: Noodzakelijk voor interactieve functies, realtime-updates en gegevens die veranderen op basis van invoer van de gebruiker. Je profiteert daarbij van de caching- en opnieuw-ophalenmogelijkheden van React Query.
Vaak levert een hybride aanpak de beste prestaties en gebruikerservaring op.
Korte controle: gegevens ophalen met de App Router
Je wilt initiële, niet-interactieve gegevens voor een blogbericht rechtstreeks op de server ophalen om de laadtijd van de pagina te verbeteren. Welk componenttype en welk gebruikspatroon van tRPC zijn hiervoor het meest geschikt?
Samenvatting: tRPC in de App Router
Goed gedaan! Je hebt geleerd hoe je tRPC integreert met de Next.js App Router.
- tRPC biedt typeveiligheid van begin tot eind voor zowel servercomponenten als clientcomponenten.
- Gebruik een tRPC-client aan de serverzijde om rechtstreeks gegevens op te halen in servercomponenten.
- Gebruik React Query-hooks (via een provider aan de clientzijde) om interactief gegevens op te halen in clientcomponenten.
- De keuze tussen gegevens ophalen op de server of de client hangt af van je behoeften op het gebied van prestaties en interactiviteit.
Met deze hybride aanpak kun je robuuste, typeveilige Next.js-applicaties bouwen!
Leer tRPC API's met typeveiligheid van begin tot eind met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 10
- Lessen
- 40
Veelgestelde vragen
Is de les “tRPC met Next.js App Router” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad tRPC API's met typeveiligheid van begin tot eind, waaronder “tRPC met Next.js App Router”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus tRPC API's met typeveiligheid van begin tot eind bevat in totaal 4 lessen.
Wat leer ik in “tRPC met Next.js App Router”?
Integreer tRPC naadloos in de Next.js App Router en benut servercomponents voor het efficiënt ophalen van gegevens. Je oefent met tRPC API's met typeveiligheid van begin tot eind door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met tRPC API's met typeveiligheid van begin tot eind te beginnen?
Ervaring vooraf is niet nodig. tRPC API's met typeveiligheid van begin tot eind op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “tRPC met Next.js App Router”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over tRPC API's met typeveiligheid van begin tot eind?
Ja. Elke les over tRPC API's met typeveiligheid van begin tot eind bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- tRPC met Next.js App Router
- Geavanceerde integratie met React Query
- Servercomponents en gegevens ophalen met tRPC
- Optimistische updates met tRPC-mutaties