import Image from 'next/image'; import { TableOfContents } from '@/components/mdx/TableOfContents'; import { Callout } from '@/components/mdx/Callout'; import { CodeBlock } from '@/components/mdx/CodeBlock'; Att bygga API:er kan vara klurigt, särskilt när det gäller att upprätthålla typesäkerhet mellan frontend och backend. tRPC löser detta problem genom att möjliggöra end-to-end typesäkra API:er i dina Next.js-appar. I den här guiden går vi igenom hur du sätter upp och använder tRPC effektivt. Denna guide förutsätter att du använder Next.js 14+ med App Router och TypeScript. Se till att du har en grundläggande förståelse för TypeScript innan du går vidare. ## Vad är tRPC? tRPC (TypeScript Remote Procedure Call) låter dig bygga och konsumera helt typesäkra API:er utan schemas eller kodgenerering. Den utnyttjar TypeScripts inferensförmåga för att erbjuda en fantastisk utvecklarupplevelse och upptäcka fel innan körning. ### Viktiga fördelar - End-to-end typesäkerhet utan kodgenerering - Fantastisk utvecklarupplevelse med autokomplettering - Mindre bundlestorlek jämfört med GraphQL-alternativ - Inbyggt stöd för TypeScript - Inbyggd felhantering och validering - Sömlös integration med React Query ## Installera tRPC i Next.js Börja med att installera nödvändiga beroenden: {`npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query zod`} Observera att vi inte längre behöver `@trpc/next` i nyare versioner av tRPC med Next.js App Router. ### Projektstruktur Låt oss sätta upp en grundläggande mappstruktur för vår tRPC-implementation: ```txt ├── app/ │ ├── api/ │ │ └── trpc/ │ │ └── [trpc]/ │ │ └── route.ts │ └── _trpc/ │ ├── Provider.tsx │ ├── ServerProvider.tsx │ └── client.ts ├── server/ │ ├── routers/ │ │ ├── _app.ts │ │ ├── user.ts │ │ └── post.ts │ ├── trpc.ts │ └── context.ts ``` ### Skapa tRPC-instans och kontext Först skapar vi vår tRPC-instans: {`import { initTRPC, TRPCError } from '@trpc/server'; import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch'; import { ZodError } from 'zod'; // Kontexttyp för vår API export const createContext = async (opts: FetchCreateContextFnOptions) => { return { req: opts.req, // Här kan du lägga till databaskopplingar, autentisering, etc. // prisma: new PrismaClient(), // getUser: () => getUser(opts.req), }; }; type Context = Awaited>; // Skapa en tRPC-instans const t = initTRPC.context().create({ errorFormatter({ shape, error }) { return { ...shape, data: { ...shape.data, zodError: error.cause instanceof ZodError ? error.cause.flatten() : null, }, }; }, }); // Exportera utility-funktioner export const { middleware, router, procedure } = t;`} ### Skapa en route-handler för API:et {`import { fetchRequestHandler } from '@trpc/server/adapters/fetch'; import { appRouter } from '@/server/routers/_app'; import { createContext } from '@/server/trpc'; // Konfigurera route-hanteraren för Next.js App Router const handler = async (req: Request) => { return fetchRequestHandler({ endpoint: '/api/trpc', req, router: appRouter, createContext, // Lägg till om du vill logga felmeddelanden på serversidan onError: process.env.NODE_ENV === 'development' ? ({ path, error }) => { console.error(\`tRPC failed on \${path}: \${error}\`); } : undefined, }); }; // Exportera för Next.js App Router export { handler as GET, handler as POST };`} ### Skapa routrar Nu kan vi definiera våra routrar. Först den huvudsakliga app-routern: {`import { router } from '@/server/trpc'; import { userRouter } from './user'; import { postRouter } from './post'; export const appRouter = router({ user: userRouter, post: postRouter, }); // Exportera typen så att client kan använda den export type AppRouter = typeof appRouter;`} Sedan implementerar vi användarroutern: {`import { procedure, router } from '@/server/trpc'; import { z } from 'zod'; export const userRouter = router({ profile: procedure .input(z.object({ id: z.string() })) .query(async ({ input, ctx }) => { // Här skulle du hämta användaren från din databas return { id: input.id, name: 'John Doe', email: 'john@example.com', }; }), update: procedure .input(z.object({ id: z.string(), name: z.string().min(3).optional(), email: z.string().email().optional(), })) .mutation(async ({ input, ctx }) => { // Här skulle du uppdatera användaren i din databas return { id: input.id, name: input.name || 'John Doe', email: input.email || 'john@example.com', }; }), });`} Och postroutern: {`import { procedure, router } from '@/server/trpc'; import { z } from 'zod'; export const postRouter = router({ list: procedure .query(async ({ ctx }) => { // Här skulle du hämta poster från din databas return [ { id: '1', title: 'Första inlägget', content: 'Hej värld!' }, { id: '2', title: 'Andra inlägget', content: 'tRPC är fantastiskt!' }, ]; }), byId: procedure .input(z.object({ id: z.string() })) .query(async ({ input, ctx }) => { // Här skulle du hämta en specifik post return { id: input.id, title: 'Post titel', content: 'Post innehåll', }; }), create: procedure .input(z.object({ title: z.string().min(1).max(100), content: z.string().min(1), })) .mutation(async ({ input, ctx }) => { // Här skulle du skapa en post i din databas return { id: Date.now().toString(), ...input, }; }), });`} ## Integration på klientsidan ### Skapa en klient {`import { createTRPCReact } from '@trpc/react-query'; import { type AppRouter } from '@/server/routers/_app'; export const trpc = createTRPCReact();`} ### Skapa Provider-komponenter För klientsidan: {`'use client'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { httpBatchLink } from '@trpc/client'; import { useState } from 'react'; import { trpc } from './client'; export function TRPCProvider({ children }: { children: React.ReactNode }) { const [queryClient] = useState(() => new QueryClient({ defaultOptions: { queries: { staleTime: 5 * 1000, // 5 sekunder }, }, })); const [trpcClient] = useState(() => trpc.createClient({ links: [ httpBatchLink({ url: '/api/trpc', // För att skicka cookies med förfrågningar fetch(url, options) { return fetch(url, { ...options, credentials: 'include', }); }, }), ], }) ); return ( {children} ); }`} ### Använda providern i layout {`import { TRPCProvider } from './_trpc/Provider'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); }`} ### Använda tRPC i en komponent {`'use client'; import { trpc } from '@/app/_trpc/client'; export function PostsList() { // Hämta posts med React Query const postsQuery = trpc.post.list.useQuery(); // Mutation för att skapa ny post const createPost = trpc.post.create.useMutation({ // Uppdatera cache när mutation lyckats onSuccess: () => { // Invalidera queries för att uppdatera UI postsQuery.refetch(); }, }); if (postsQuery.isLoading) { return

Laddar poster...

; } if (postsQuery.error) { return

Fel: {postsQuery.error.message}

; } return (

Inlägg

{postsQuery.data?.map((post) => (

{post.title}

{post.content}

))}

{ e.preventDefault(); const formData = new FormData(e.currentTarget); createPost.mutate({ title: formData.get('title') as string, content: formData.get('content') as string, }); e.currentTarget.reset(); }} >

<button
          type="submit"
          className="px-4 py-2 text-white bg-blue-500 rounded disabled:opacity-50"
          disabled={createPost.isLoading}
        >
          {createPost.isLoading ? 'Skapar...' : 'Skapa inlägg'}
        </button>
      </form>
    </div>
  );
}`}
</CodeBlock>

## Avancerade funktioner

### Skyddade procedurer med middleware

<CodeBlock title="server/trpc.ts" language="typescript">
{`import { TRPCError } from '@trpc/server';

// ... befintlig kod

// Middleware för att kontrollera autentisering
const isAuthenticated = middleware(async ({ ctx, next }) => {
  // I ett riktigt projekt skulle du hämta användaren från en token
  const user = await getUser(ctx.req);
  
  if (!user) {
    throw new TRPCError({
      code: 'UNAUTHORIZED',
      message: 'Du måste vara inloggad för att utföra denna åtgärd',
    });
  }
  
  return next({
    ctx: {
      // Lägger till användarinfon i kontexten
      user,
    },
  });
});

// Skapa en skyddad procedur
export const protectedProcedure = procedure.use(isAuthenticated);`}
</CodeBlock>

### Använd den skyddade proceduren

<CodeBlock title="server/routers/post.ts" language="typescript">
{`import { procedure, protectedProcedure, router } from '@/server/trpc';
import { z } from 'zod';

export const postRouter = router({
  // Offentliga procedurer
  list: procedure.query(/* ... */),
  byId: procedure.query(/* ... */),
  
  // Skyddade procedurer som kräver autentisering
  create: protectedProcedure
    .input(z.object({
      title: z.string().min(1).max(100),
      content: z.string().min(1),
    }))
    .mutation(async ({ input, ctx }) => {
      // ctx.user är garanterat att finnas här
      return {
        id: Date.now().toString(),
        userId: ctx.user.id,
        ...input,
      };
    }),
    
  delete: protectedProcedure
    .input(z.object({ id: z.string() }))
    .mutation(async ({ input, ctx }) => {
      // Kontrollera om användaren äger posten
      // const post = await ctx.prisma.post.findUnique({ where: { id: input.id } });
      
      // if (post?.userId !== ctx.user.id) {
      //   throw new TRPCError({ code: 'FORBIDDEN' });
      // }
      
      // await ctx.prisma.post.delete({ where: { id: input.id } });
      
      return { success: true };
    }),
});`}
</CodeBlock>

## Prestandaoptimering

### 1. Caching med React Query

React Query hanterar caching automatiskt, men du kan finjustera beteendet:

<CodeBlock title="app/components/PostsWithCaching.tsx" language="typescript">
{`// Grundläggande användning med caching
const posts = trpc.post.list.useQuery(undefined, {
  staleTime: 1000 * 60, // Data är "fresh" i 1 minut
  cacheTime: 1000 * 60 * 5, // Håll data i 5 minuter
});

// Prefetching data
const utils = trpc.useContext();

useEffect(() => {
  // Prefetcha posts när komponenten monteras
  utils.post.list.prefetch();
}, [utils]);

// Använd den cachade datan i en callback
const handleUserClick = async (userId: string) => {
  // Detta kommer att använda cachen om tillgänglig
  await utils.user.profile.fetch({ id: userId });
};`}
</CodeBlock>

### 2. Optimistiska uppdateringar

<CodeBlock title="app/components/OptimisticUI.tsx" language="typescript">
{`const utils = trpc.useContext();
const postsQuery = trpc.post.list.useQuery();

## Bästa praxis

### 1. Strukturera kod efter domän

Organisera dina routrar och procedurer efter funktioner eller domäner för att hålla koden lätt att underhålla:

```txt
server/
├── routers/
│   ├── _app.ts           # Huvudrouter
│   │   ├── index.ts
│   │   └── procedures.ts
│   ├── users/
│   │   ├── index.ts
│   │   └── procedures.ts
│   └── posts/
│       ├── index.ts
│       └── procedures.ts
├── trpc.ts
└── context.ts
```

### 2. Implementera robust felhantering

<CodeBlock title="app/components/ErrorHandling.tsx" language="typescript">
{`const createPost = trpc.post.create.useMutation({
  onError: (error) => {
    // Visa ett användarvänligt felmeddelande baserat på feltyp
    if (error.data?.code === 'UNAUTHORIZED') {
      toast.error('Du måste logga in för att skapa inlägg');
    } else if (error.data?.zodError) {
      // Hantera valideringsfel
      const fieldErrors = error.data.zodError.fieldErrors;
      Object.entries(fieldErrors).forEach(([field, errors]) => {
        if (errors && errors.length > 0) {
          toast.error(\`\${field}: \${errors[0]}\`);
        }
      });
    } else {
      toast.error('Något gick fel. Försök igen senare.');
    }
  },
});`}
</CodeBlock>

### 3. Använd transformers för att forma data

<CodeBlock title="server/routers/post.ts" language="typescript">
{`const postRouter = router({
  byId: procedure
    .input(z.object({ id: z.string() }))
    .query(async ({ input, ctx }) => {
      const post = {
        id: input.id,
        title: 'Min post',
        content: 'Innehåll',
        createdAt: new Date(),
        authorId: 'user-1',
      };
      
      // Transformera data innan den skickas till klienten
      return {
        ...post,
        createdAt: post.createdAt.toISOString(),
        // Lägg till beräknade fält
        excerpt: post.content.slice(0, 100) + '...',
      };
    }),
});`}
</CodeBlock>

## Slutsats

Med tRPC kan du enkelt bygga typesäkra API:er i dina Next.js-applikationer utan extra kodgenerering eller schemahantering. Fördelarna är tydliga:

- Full typesäkerhet från backend till frontend
- Förbättrad utvecklarupplevelse med autocompletion
- Robust felhantering och validering
- Sömlös integration med React Query för caching och optimistiska uppdateringar

Genom att följa mönstren i denna guide kan du bygga skalbara, typesäkra API:er som är lätta att underhålla och utöka. tRPC passar särskilt bra i monorepon eller fullstack-projekt där samma team hanterar både frontend och backend.

Kom ihåg att:
- Validera all input med Zod
- Strukturera din kod efter domän
- Implementera solid felhantering
- Använda React Query:s cachingfunktioner för optimerad prestanda

Lycka till med din typesäkra API-utveckling!
</article></body></html>