next-js-rpc

• Quickly create type-safe RPC endpoints for Next.JS
• Request validation with Zod
• Client side fetching with React Query

Install

npm i zod react-query @jonbilous/next-js-rpc

Next.JS API

import { createHandler } from "@jonbilous/next-js-rpc/";
import { getUserSession } from "utils/ctx";
import db from "utils/db";
import zod from "zod";

const ctx = {
  user: getUserSession,
};

const schema = zod.null();

const getLocations = createHandler({
  url: "/api/functions",
  fn: async (params, ctx) => {
    return db.location.findMany();
  },
  schema,
  ctx,
});

export type LocationQuery = typeof getLocations;

export default getLocations;

Next.JS Page

import { client } from "@jonbilous/next-js-rpc";
import type { GetServerSideProps, NextPage } from "next";
import type { LocationQuery } from "pages/api/functions";
import getLocations from "pages/api/functions";

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const locations = await getLocations.ssr(null, ctx);
  // import handler and call .ssr() to use on the server
  return { props: { locations } };
};

const Home: NextPage = (props) => {
  const query = client.useQuery < LocationQuery > ("/api/functions", null);
  // import type on the client and pass to useQuery - url, request type and response types will be inferred
  return <div></div>;
};

export default Home;