📝

【tRPC】NextJs & tRPC 【#３ tRPC Using API】

2025/04/16に公開

Next.js

tRPC

tech

【#３ tRPC Using API】

YouTube: https://youtu.be/cCeGJhaoqTc
https://youtu.be/cCeGJhaoqTc

今回は下記ページの内容に従って
前回作成したtRPCのAPIのサンプルを
ブラウザで表示します。

下記ファイルのコメントアウト部分は
サーバーコンポーネントで「tRPC」を
使用した際のコードになります。

src/app/page.tsx

import { ClientGreeting } from "@/components/client-greeting";
import { HydrateClient, trpc } from "@/trpc/server";

export default async function Home() {
  void trpc.hello.prefetch({ text: "tRPC" });
  // const greeting = await trpc.hello({ text: "tRPC" });

  return (
    <HydrateClient>
      <ClientGreeting />
      {/* <div>{greeting.greeting}</div> */}
    </HydrateClient>
  );
}

src/components/client-greeting.tsx

"use client";
// <-- hooks can only be used in client components
import { trpc } from "@/trpc/client";

export function ClientGreeting() {
  const greeting = trpc.hello.useQuery({ text: "tRPC" });

  if (!greeting.data) return <div>Loading...</div>;

  return <div>{greeting.data.greeting}</div>;
}

クライアントコンポーネントでtRPCを使用する場合は
「TRPCProvider」を設定します。

src/app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";

import { TRPCProvider } from "@/trpc/client";

import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <TRPCProvider>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          {children}
        </body>
      </TRPCProvider>
    </html>
  );
}

【#３ tRPC Using API】

Discussion