Next.js-adapter

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

tRPC:s stöd för Next.js är mycket mer omfattande än bara en adapter. Den här sidan ger en kort sammanfattning av hur du konfigurerar adaptern. För komplett dokumentation, se Next.js-integreringsguiden.

Exempelapp

Description	Links
Next.js Minimal Starter	CodeSandbox Source

Next.js-exempel

Att serva din tRPC-router i ett Next.js-projekt är enkelt. Skapa bara en API-hanterare i pages/api/trpc/[trpc].ts enligt nedan:

pages/api/trpc/[trpc].ts
ts
import { createNextApiHandler } from '@trpc/server/adapters/next';
import { createContext } from '../../../server/trpc/context';
import { appRouter } from '../../../server/trpc/router/_app';
 
export default createNextApiHandler({
  router: appRouter,
  createContext,
});

pages/api/trpc/[trpc].ts
ts
import { createNextApiHandler } from '@trpc/server/adapters/next';
import { createContext } from '../../../server/trpc/context';
import { appRouter } from '../../../server/trpc/router/_app';
 
export default createNextApiHandler({
  router: appRouter,
  createContext,
});

Hantering av CORS och annan avancerad användning

Även om du vanligtvis kan "konfigurera och glömma" API-hanteraren som visas ovan, kan det ibland vara nödvändigt att modifiera den ytterligare.

API-hanteraren som skapas av createNextApiHandler och motsvarande i andra ramverk är bara en funktion som tar emot req och res-objekt. Det innebär att du kan modifiera dessa objekt innan de skickas till hanteraren, till exempel för att aktivera CORS.

pages/api/trpc/[trpc].ts
ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { createNextApiHandler } from '@trpc/server/adapters/next';
import { createContext } from '../../../server/trpc/context';
import { appRouter } from '../../../server/trpc/router/_app';
 
// create the API handler, but don't return it yet
const nextApiHandler = createNextApiHandler({
  router: appRouter,
  createContext,
});
 
// https://nextjs.org/docs/api-routes/introduction
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  // We can use the response object to enable CORS
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Request-Method', '*');
  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
  res.setHeader('Access-Control-Allow-Headers', '*');
 
  // If you need to make authenticated CORS calls then
  // remove what is above and uncomment the below code
 
  // Allow-Origin has to be set to the requesting domain that you want to send the credentials back to
  // res.setHeader('Access-Control-Allow-Origin', 'http://example:6006');
  // res.setHeader('Access-Control-Request-Method', '*');
  // res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
  // res.setHeader('Access-Control-Allow-Headers', 'content-type');
  // res.setHeader('Referrer-Policy', 'no-referrer');
  // res.setHeader('Access-Control-Allow-Credentials', 'true');
 
  if (req.method === 'OPTIONS') {
    res.writeHead(200);
    return res.end();
  }
 
  // finally pass the request on to the tRPC handler
  return nextApiHandler(req, res);
}

pages/api/trpc/[trpc].ts
ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { createNextApiHandler } from '@trpc/server/adapters/next';
import { createContext } from '../../../server/trpc/context';
import { appRouter } from '../../../server/trpc/router/_app';
 
// create the API handler, but don't return it yet
const nextApiHandler = createNextApiHandler({
  router: appRouter,
  createContext,
});
 
// https://nextjs.org/docs/api-routes/introduction
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  // We can use the response object to enable CORS
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Request-Method', '*');
  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
  res.setHeader('Access-Control-Allow-Headers', '*');
 
  // If you need to make authenticated CORS calls then
  // remove what is above and uncomment the below code
 
  // Allow-Origin has to be set to the requesting domain that you want to send the credentials back to
  // res.setHeader('Access-Control-Allow-Origin', 'http://example:6006');
  // res.setHeader('Access-Control-Request-Method', '*');
  // res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
  // res.setHeader('Access-Control-Allow-Headers', 'content-type');
  // res.setHeader('Referrer-Policy', 'no-referrer');
  // res.setHeader('Access-Control-Allow-Credentials', 'true');
 
  if (req.method === 'OPTIONS') {
    res.writeHead(200);
    return res.end();
  }
 
  // finally pass the request on to the tRPC handler
  return nextApiHandler(req, res);
}

App Router (Rutthanterare)

Om du använder Next.js App Router ska du använda fetch-adaptern istället, eftersom App Routers rutthanterare bygger på webbstandarden Request och Response. Se App Router-konfigurationsguiden för en komplett genomgång.

app/api/trpc/[trpc]/route.ts
ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { createTRPCContext } from '../../trpc/init';
import { appRouter } from '../../trpc/routers/_app';
 
const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext: createTRPCContext,
  });
 
export { handler as GET, handler as POST };

app/api/trpc/[trpc]/route.ts
ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { createTRPCContext } from '../../trpc/init';
import { appRouter } from '../../trpc/routers/_app';
 
const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext: createTRPCContext,
  });
 
export { handler as GET, handler as POST };