Next.js 어댑터

팁

tRPC의 Next.js 지원은 단순한 어댑터를 넘어 훨씬 광범위합니다. 이 페이지에서는 어댑터 설정에 대한 간략한 요약을 다룹니다. 전체 문서에 대해서는 Next.js 통합 가이드를 참조하세요.

예제 앱

설명	링크
Next.js 최소 시작 템플릿	CodeSandbox 소스

Next.js 예제

Next.js 프로젝트에서 tRPC 라우터를 제공하는 것은 간단합니다. 아래에 표시된 대로 pages/api/trpc/[trpc].ts에 API 핸들러를 생성하면 됩니다:

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,
});

CORS 및 기타 고급 사용법 처리

위에서 보여준 대로 API 핸들러를 "설정하고 방치"하는 경우가 대부분이지만, 때로는 추가적으로 수정하고 싶을 수 있습니다.

createNextApiHandler 및 다른 프레임워크의 동등한 기능으로 생성된 API 핸들러는 req와 res 객체를 받는 함수일 뿐입니다. 이는 핸들러에 전달하기 전에 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);
}

앱 라우터 (Route Handlers)

Next.js 앱 라우터를 사용하는 경우, 앱 라우터의 Route Handlers는 Web 표준 Request 및 Response 객체를 기반으로 하므로 fetch 어댑터를 대신 사용하세요. 전체 설정 과정에 대해서는 앱 라우터 설정 가이드를 참조하세요.

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 };