NextJS app router support

[AashJ]

Any plans to support the NextJS app router or an example of how to do so? I think the NextResponse and NextRequest objects are slightly different than the NextAPiResponse/NextAPIRequest objects, so the current iteration doesn't work without some messing around of the objects.

[ccssmnn]

This should be fairly easy to set up once a fetch adapter is implemented #188

[Vercjames]

Forked and support added here:
https://github.com/Vercjames/package-trpc-swagger

[kdy1]

I made https://www.npmjs.com/package/next-trpc-openapi

[Mehulparekh144]

.npmjs.com/package/next-trpc-openapi

I tried using ur framework I am getting errors like
for each HTTP method instead.
⨯ No HTTP methods exported in 'C:\Users\Mehul\Desktop\testT3\demo4\src\app\api[...trpc]\route.ts'. Export a named export for each HTTP method.
GET /api/say-hello 405 in 40ms
⨯ Detected default export in 'C:\Users\Mehul\Desktop\testT3\demo4\src\app\api[...trpc]\route.ts'. Export a named export for each HTTP method instead.
⨯ No HTTP methods exported in 'C:\Users\Mehul\Desktop\testT3\demo4\src\app\api[...trpc]\route.ts'. Export a named export for each HTTP method.

`
[trpc]/route.ts
import { inferRouterContext } from "@trpc/server";
import { FetchCreateContextFn, FetchCreateContextFnOptions, fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { type NextRequest } from "next/server";

import { env } from "/env";
import { appRouter } from "/server/api/root";
import { createTRPCContext } from "/server/api/trpc";
import { db } from "/server/db";

/**

• This wraps the createTRPCContext helper and provides the required context for the tRPC API when
• handling a HTTP request (e.g. when you make requests from Client Components).
  */
  // export const createContext = async (req: NextRequest) => {
  // return createTRPCContext({
  // headers: req.headers,
  // });
  // };
  export const createContext: FetchCreateContextFn = async (opts: FetchCreateContextFnOptions) => {
  const req = opts.req; // Access request object from options
  // Your logic to create context
  const headers = req.headers;

return { headers, db } as inferRouterContext; // Return the context object
};

const trpcApiRouteHandler = (req: Request) =>
fetchRequestHandler({
endpoint: "/api",
req,
// Your trpc router
router: appRouter,
// Your trpc createContext
createContext,
});

export {
trpcApiRouteHandler as DELETE,
trpcApiRouteHandler as GET,
trpcApiRouteHandler as HEAD,
trpcApiRouteHandler as PATCH,
trpcApiRouteHandler as POST,
trpcApiRouteHandler as PUT,
};
`

`
[...trpc]\route.ts

import { createOpenApiNextAppHandler } from "next-trpc-openapi";
import { appRouter } from "~/server/api/root";
import { createContext } from "../trpc/[trpc]/route";

const handler = createOpenApiNextAppHandler({
// Your trpc router
router: appRouter,
// Your trpc createContext
createContext : createContext,
responseMeta: undefined,
onError: undefined,
});

export default handler;
`

Can you help with this. Appreciate it. Thanks

[mrgoonie]

Forked and support added here: https://github.com/Vercjames/package-trpc-swagger

Thanks!