📑

【tRPC】NextJs & tRPC 【#５ tRPC Authorization１ Clerk setup】

2025/04/23に公開

Next.js

tRPC

tech

【#５ tRPC Authorization１ Clerk Setup】

YouTube: https://youtu.be/BkmsjejIfuE
https://youtu.be/BkmsjejIfuE

今回からtRPCの認証機能の実装を進めていきます。

認証機能は「Clerk」を使用しますので、
今回はこちらのセッティングを行います。

https://clerk.com/

動画撮影時点でReact19関連で
「--legacy-peer-deps」を使用しています。

npm install @clerk/nextjs --legacy-peer-deps

src/middleware.ts

import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware()

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

src/app/layout.tsx

import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import { ClerkProvider } from '@clerk/nextjs'

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 (
    <ClerkProvider>
      <html lang="en">
        <TRPCProvider>
          <body
            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
          >
            {children}
          </body>
        </TRPCProvider>
      </html>
    </ClerkProvider>
  )
}

src/app/page.tsx

import {
  SignInButton,
  SignUpButton,
  SignedIn,
  SignedOut,
  UserButton,
} from '@clerk/nextjs'

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

export default async function Home() {
  void trpc.hello.prefetch({ text: 'tRPC' })

  return (
    <HydrateClient>
      <ClientGreeting />
      <SignedOut>
        <SignInButton mode="modal" />
        <SignUpButton mode="modal" />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </HydrateClient>
  )
}

こちらは「.env.local」のサンプルです。

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_bGVu......................
CLERK_SECRET_KEY=sk_test_vd.............................

【#５ tRPC Authorization１ Clerk Setup】

Discussion