چگونه من برنامه های Typescript Full-Stack را با TRPC و Next.JS 15 ساختم

npx create-next-app@latest trpc-fullstack-app --typescript
cd trpc-fullstack-app

npm install @trpc/server @trpc/client @trpc/react-query @trpc/next zod
npm install @tanstack/react-query

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;

import { z } from "zod";
import { router, publicProcedure } from "../trpc";

export const appRouter = router({
  hello: publicProcedure
    .input(z.object({ name: z.string().optional() }))
    .query(({ input }) => {
      return {
        greeting: `Hello, ${input.name ?? "world"}!`,
      };
    }),
});

import { router } from "./trpc";
import { appRouter as exampleRouter } from "./routers/example";

export const appRouter = router({
  example: exampleRouter,
});

export type AppRouter = typeof appRouter;

import { createNextApiHandler } from "@trpc/server/adapters/next";
import { appRouter } from "@/server/api/root";

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

import { createTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "@/server/api/root";

export const trpc = createTRPCReact<AppRouter>();

import { trpc } from "@/utils/trpc";
import { httpBatchLink } from "@trpc/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { AppProps } from "next/app";
import { useState } from "react";

export default function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "/api/trpc",
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
      QueryClientProvider>
    trpc.Provider>
  );
}

import { trpc } from "@/utils/trpc";

export default function Home() {
  const hello = trpc.example.hello.useQuery({ name: "Dhanian" });

  if (!hello.data) return <p>Loading...p>;

  return (
    <div className="flex items-center justify-center h-screen text-2xl font-bold">
      {hello.data.greeting}
    div>
  );
}

npm run dev