tRPC med Next.js App Router
Integrér tRPC problemfrit i Next.js App Router, og udnyt serverkomponenter til effektiv datahentning.
tRPC med Next.js App Router er en gratis Typesikre API'er fra frontend til backend med tRPC-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Typesikre API'er fra frontend til backend med tRPC, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Typesikre API'er fra frontend til backend med tRPC-kurset indeholder 4 lektioner i alt.
tRPC og Next.js App Router
Velkommen til en ny æra inden for webudvikling med Next.js App Router! I denne lektion bliver du ført gennem integrationen af tRPC i denne effektive arkitektur.
App Router introducerer nye paradigmer som serverkomponenter og klientkomponenter. tRPC hjælper dig med at bevare typesikkerhed fra ende til ende på tværs af disse forskellige renderingsmiljøer.
Forstå det grundlæggende i App Router
Før vi går i gang med tRPC, opsummerer vi kort de centrale begreber i App Router:
- Serverkomponenter: Renderes på serveren og er velegnede til hentning af data og statisk indhold. De har hverken tilstand eller interaktivitet.
- Klientkomponenter: Renderes på klienten og muliggør interaktivitet, tilstand og browser-API'er. De markeres med
'use client';.
tRPC spiller en vigtig rolle i at gøre datahentning typesikker, uanset om du arbejder i en server- eller klientkomponent.
tRPC-adapteren til App Router
Hvis du vil integrere tRPC med Next.js App Router, skal du bruge adapteren @trpc/next/app-router. Denne pakke indeholder hjælpeværktøjer, der er udviklet specifikt til dette miljø.
Den håndterer detaljerne ved kald af tRPC-procedurer fra både serverkomponenter (direkte kald) og klientkomponenter (via React Query-hooks).
Opsætning af tRPC på serversiden
Først skal du eksponere dine tRPC-API-ruter i mappen app. Det indebærer typisk, at du opretter en route.ts-fil, f.eks. app/api/trpc/[trpc]/route.ts.
Adapteren hjælper med at konfigurere din tRPC-server, så den fungerer problemfrit sammen med Next.js-API-ruter. Den håndterer indkommende forespørgsler og sender dem videre til dine tRPC-procedurer.
Datahentning i serverkomponenter
En af de største fordele ved App Router er, at du kan hente data direkte i serverkomponenter. Med tRPC betyder det, at du kan kalde dine backendprocedurer uden JavaScript på klientsiden.
Du opretter en særlig tRPC-klient på serversiden, som gør det muligt at kalde procedurer direkte på samme måde som en funktion, samtidig med at typesikkerheden bevares.
Demo af datahentning i en serverkomponent
Her kan du se, hvordan du henter data med tRPC direkte i en Next.js-serverkomponent, f.eks. app/page.tsx. Bemærk, at der ikke bruges nogen hooks her.
// 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>
);
}Opsætning af tRPC på klientsiden
Til klientkomponenter skal du stadig konfigurere en tRPC-provider på klientsiden. Det gøres typisk i dit rod-layout, f.eks. app/layout.tsx, ved at pakke din app ind i en komponent med 'use client';, som leverer tRPC-klienten.
Denne provider gør tRPC's React Query-hooks tilgængelige for alle klientkomponenter.
Datahentning i klientkomponenter
I en klientkomponent bruger du tRPC's React Query-hooks, f.eks. useQuery til datahentning eller useMutation til ændring af data, på samme måde som i en traditionel React-app.
Husk at markere din komponent med 'use client'; øverst i filen, så den kører på klienten.
Demo af datahentning i en klientkomponent
Dette eksempel viser en klientkomponent, f.eks. app/client-page/page.tsx, der henter data med tRPC's useQuery-hook. Denne komponent renderes på klientsiden.
// 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>
);
}Valg mellem datahentning på serveren og klienten
Hvornår skal du hente data i en serverkomponent i stedet for en klientkomponent?
- Serverkomponenter: Ideelle til indledende dataindlæsning, statisk indhold og data, der ikke kræver genhentning eller interaktivitet på klientsiden. Det reducerer størrelsen på klientens bundle.
- Klientkomponenter: Nødvendige til interaktive funktioner, opdateringer i realtid og data, der ændres ud fra brugerinput. Du får fordel af React Query's caching og genhentning.
En kombination af de to tilgange giver ofte den bedste ydeevne og brugeroplevelse.
Hurtigt tjek: Datahentning med App Router
Du vil hente indledende, ikke-interaktive data til et blogindlæg direkte på serveren for at forbedre sidens indlæsningstid. Hvilken komponenttype og hvilket tRPC-brugsmønster er mest passende?
Opsummering: tRPC i App Router
Godt arbejde! Du har lært, hvordan du integrerer tRPC med Next.js App Router.
- tRPC giver typesikkerhed fra ende til ende for både serverkomponenter og klientkomponenter.
- Brug en tRPC-klient på serversiden til direkte datahentning i serverkomponenter.
- Brug React Query-hooks via en provider på klientsiden til interaktiv datahentning i klientkomponenter.
- Valget mellem datahentning på serveren og klienten afhænger af dine behov for ydeevne og interaktivitet.
Denne kombinerede tilgang gør det muligt at bygge robuste og typesikre Next.js-applikationer!
Lær Typesikre API'er fra frontend til backend med tRPC med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 10
- Lektioner
- 40
Ofte stillede spørgsmål
Er lektionen “tRPC med Next.js App Router” gratis?
Ja — alle 3 lektioner i læringssporet Typesikre API'er fra frontend til backend med tRPC, inklusive “tRPC med Next.js App Router”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Typesikre API'er fra frontend til backend med tRPC-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “tRPC med Next.js App Router”?
Integrér tRPC problemfrit i Next.js App Router, og udnyt serverkomponenter til effektiv datahentning. Du øver dig i Typesikre API'er fra frontend til backend med tRPC med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Typesikre API'er fra frontend til backend med tRPC?
Der kræves ingen tidligere erfaring. Typesikre API'er fra frontend til backend med tRPC på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “tRPC med Next.js App Router”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Typesikre API'er fra frontend til backend med tRPC-lektion?
Ja. Alle Typesikre API'er fra frontend til backend med tRPC-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- tRPC med Next.js App Router
- Avanceret integration med React Query
- Serverkomponenter og datahentning med tRPC
- Optimistiske opdateringer med tRPC-mutationer