11. Интеграция с Next.js

Next.js — одна из наиболее популярных платформ для деплоя tRPC приложений. Пакет @trpc/next предоставляет специализированные адаптеры и хелперы для бесшовной интеграции с обоими роутерами Next.js.

Pages Router

В Pages Router tRPC API маршрутизируется через catch-all файл pages/api/trpc/[trpc].ts. Используйте createNextApiHandler для создания обработчика. Все запросы к /api/trpc/* будут перехвачены этим хендлером.

App Router

В App Router используйте fetchRequestHandler в файле app/api/trpc/[trpc]/route.ts. Он поддерживает Edge Runtime и Server Components. Запросы обрабатываются через стандартные GET и POST обработчики.

getServerSideProps с tRPC

Для серверного рендеринга в Pages Router используйте createServerSideHelpers. Это позволяет вызывать tRPC процедуры прямо в getServerSideProps и предзаполнять кеш React Query данными с сервера.

Server Components и tRPC

В App Router tRPC процедуры можно вызывать напрямую из Server Components через вызов процедуры как функции (без HTTP): const caller = appRouter.createCaller(ctx). Это самый эффективный способ — нет сетевого overhead.

CORS конфигурация

При использовании tRPC с отдельным фронтендом необходимо настроить CORS. Для Next.js это делается через next.config.js headers или через middleware.