Next.js Integration

Next.js is a leading React framework for server-rendered apps. oRPC works with both the App Router and Pages Router. For additional context, refer to the Node Integration and Fetch Server Integration guides.

INFO

oRPC also supports Server Action out-of-the-box.

App Router

app/rpc/[[...rest]].ts

import { RPCHandler, serve } from '@orpc/server/next'

const handler = new RPCHandler(router)

export const { GET, POST, PUT, PATCH, DELETE } = serve(handler, {
  prefix: '/rpc',
  context: async (req) => {
    return {} // Provide initial context if needed
  },
})

INFO

The handler can be any supported oRPC handler, such as RPCHandler, OpenAPIHandler, or another custom handler.

Pages Router

pages/rpc/[[...rest]].ts

import { RPCHandler } from '@orpc/server/node'

const handler = new RPCHandler(router)

export default async (req, res) => {
  const { matched } = await handler.handle(req, res, {
    prefix: '/rpc',
    context: {}, // Provide initial context if needed
  })

  if (matched) {
    return
  }

  res.statusCode = 404
  res.end('Not found')
}

INFO

The handler can be any supported oRPC handler, such as RPCHandler, OpenAPIHandler, or another custom handler.