new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

tRPC · all subjects

server adapters/next.js

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Next.js Pages Router API handler setup

To set up tRPC with Next.js Pages Router, create an API handler in pages/api/trpc/[trpc].ts. Import createNextApiHandler from @trpc/server/adapters/next, and pass it an object with two properties: router (the appRouter) and createContext (the context creation function). Export the handler as the default export.

Next.js App Router uses fetch adapter

For Next.js App Router route handlers, use the fetch adapter instead of the Next.js adapter because App Router route handlers use Web standard Request and Response objects. Import fetchRequestHandler from @trpc/server/adapters/fetch and configure it with endpoint, req, router, and createContext properties.

Next.js Pages Router tRPC example code

Example of setting up tRPC with Next.js Pages Router: ```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, }); ```

Next.js App Router tRPC fetch handler example

Example of setting up tRPC with Next.js App Router route handlers: ```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 }; ``` Place this in app/api/trpc/[trpc]/route.ts.

FetchCreateContextFnOptions type

The context creation function for Next.js App Router tRPC handlers receives a parameter of type FetchCreateContextFnOptions from @trpc/server/adapters/fetch.

Next.js Edge Runtime example uses fetch adapter

The Next.js Edge Runtime example for tRPC is similar to the next-minimal-starter example but uses the Next.js Edge Runtime with tRPC's fetch adapter.

Setup Next.js Edge Runtime example with create-next-app

To set up the Next.js Edge Runtime example, run: npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-edge-runtime trpc-next-edge-runtime, then cd trpc-next-edge-runtime, npm i, and npm run dev.

Run Next.js Edge Runtime dev server

Start the development server by running npm run dev, which starts next.js.

Create Next.js API handler for tRPC

Use createNextApiHandler from @trpc/server/adapters/next, passing router and createContext. Export it as the default handler in pages/api/trpc/[trpc].ts. Example: export default createNextApiHandler({ router: appRouter, createContext: () => ({}) });

Give your agent this brain