Next JSON RPC

This is a library for

• Typescript
• Nextjs
• remote procedure calls (RPC).

Getting started

Install the package via

npm i next-rpc-ts

or

yarn add next-rpc-ts

How to use next-rpc-ts

1. Create a router

// router.ts
import { createRouter } from 'next-rpc-ts'

export const router = createRouter().addRoute(
  'myFirstRoute',
  (x: string) => x.length
)

2. Export the routers api handler

// ~/pages/api/[...route].ts
import { router } from '~/router'

const handler = router.getApiHandler()

export default handler

Important: The name of the file has to correspond to the router configuration apiFileName field. More about configuration here

You can learn more about this type of api route in the nextjs docs.

3. Create the client side fetcher function

// fetcher.ts
import { createRouteFetcher } from 'next-rpc-ts'
import type { router } from '~/router'

export const fetcher = createRouteFetcher({
  baseUrl: 'http://localhost:3000',
})

You can learn more about the fetchers configuration here

4. Use the fetcher in a type-safe way

import { fetcher } from '~/fetcher'

// length = 6
const length = await fetcher('myFirstRoute', 'string')

// type error
await fetcher('myFirstRoute', 4)

Router Configuration

The router shares some common config options with the fetcher: config.ts.

You can find the jsdoc for the router configuration here.

Fetcher Configuration

The fetcher shares some common config options with the router: config.ts.

You can find the jsdoc for the fetcher configuration here.

How does this work?

Typescript makes it possible to preserve each individual routes function type assigned to the specific name.

By collecting all the routes and juggling around with their types we work out a few type connections, including but not limited to:

• the parameter types for a route by name
• the return type for a route by name
• the context type by a functions return type
• etc.

We can import the routers type to the client and into the createRouteFetcher function. The different routes are then combined into a function taking the name, the list of parameters and returning a promise holding the routes return value.