今更ながらClerkを触る

とりあえずクイックスタートを素直に進める。Nextのセットアップは以下。

create-next-app@15.2.1
Ok to proceed? (y) 
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

Keita Mitsuhashi

clerkMiddleware() が提供されてるのでそれを使う形式

関数を渡すことでルートの保護ができるのは非常に良さそう。

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

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)', '/forum(.*)'])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) await auth.protect()
})

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)(.*)',
  ],
}

Keita Mitsuhashi

API Keyを設定せずに立ち上げたら以下のようにトーストが出現、リンクを踏むとセットアップフローに流された。気が利いている。

.envに書き込んでアプリケーションに反映されるのを待っている。読み込まれたら自動で遷移。すばらしい...

Keita Mitsuhashi

サインアップ・サインイン・アカウント設定画面ができちゃった。ここまで12分

細かい点は後日深掘り

Keita Mitsuhashi

Organizationを試す。

<UserButton /> を <OrganizationSwitcher /> に置き換えるだけでいい感じのUIが現れる。

layout.tsx


export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          <header className="flex justify-end items-center p-4 gap-4 h-16">
            <SignedOut>
              <SignInButton />
              <SignUpButton />
            </SignedOut>
            <SignedIn>
<              <UserButton />
>              <OrganizationSwitcher />
            </SignedIn>
          </header>
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

Keita Mitsuhashi

Organizationの機構が組み込まれているのがSaaSやデベロッパーツール作る上ではありがたい。

細かい設定画面やらユーザーの招待周りの挙動やらを考えると工数の減りがデカい。

アップデートリリース等で認証周りに気を張らなくていいのは長い目で見ると非常に良いかも。
また外部サービスアカウントとの連携もめちゃくちゃ簡単 & いろんなサービスあった & カスタムも追加できた。国産サービスのOAuth連携もいけそう
あとはバックエンドAPIの使い勝手も確認する必要あり