Next.js tRPC example

[trpc].ts

import { initTRPC } from "@trpc/server";
import * as trpcNext from "@trpc/server/adapters/next";
import { z } from "zod";

export const t = initTRPC.create()

export const appRouter = t.router({
  hello: t.procedure
    .input(z.object({
      text: z.string(),
    }))
    .query(({ input }) => {
      return {
        greeting: `Hello ${input.text}`,
      }
    })
})

export type AppRouter = typeof appRouter

export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: () => ({}),
})

_app.tsx

import type { AppProps } from 'next/app'
import '../styles/globals.css'
import { trpc } from '../utils/trpc'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default trpc.withTRPC(MyApp)

client.tsx

import { NextPage } from "next";
import { trpc } from "../utils/trpc";

const Client: NextPage = () => {
  const hello = trpc.hello.useQuery({ text: 'tRPC' })

  return (
    <main>
      {hello.data?.greeting}
    </main>
  )
}

export default Client

trpc.ts

import { createTRPCNext } from '@trpc/next'
import { httpBatchLink } from '@trpc/client'
import { AppRouter } from '../pages/api/trpc/[trpc]'

export const trpc = createTRPCNext<AppRouter>({
  config({ ctx }) {
    return {
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
    }
  },
})