ハンズオン勉強会で学んだこと：Clerkの認証機能を使って民宿アプリを構築してみた！①

はじめに

React,Next.jsのフロントエンドスキルをはじめ、コンポーネント設計、ルーティング、状態管理、API連携、DB操作などのスキルを実践的に身につけたいと思い、ハンズオン勉強会に参加しました。

今回のハンズオン勉強会では、Clerkを使って民宿予約アプリの認証機能を実装しました。

使用技術

• Next.js 15（App Router）：最新のルーティング機能を活用
• Clerk：ユーザー認証・認可を簡単に導入
• Supabase：データベースとして利用、ユーザーや宿泊情報の管理に活用
• Supabase Storage：画像のアップロード・保存に使用
• TypeScript：型安全な開発を実現
• Tailwind CSS：ユーティブなスタイリングを効率的に実装
• shadcn/ui：美しく使いやすいUIコンポーネントを導入

Clerkとは？

Clerkは、ダッシュボードを使って簡単にアプリの認証機能を設定できます。UI付きで、以下のような機能がすぐに使えます。

• サインアップ・サインインページの自動生成
• メール認証やパスワードレスログイン
• セッション管理
• ユーザーデータの取得と表示

FirebaseやNextAuthといった他の認証ツールとの違い

Clerkは、無料枠も広く、個人開発やMVPの立ち上げには最適です。ただし、ユーザーが増えてきて細かい権限管理や独自のDB構成を行いたい場合は、FirebaseやNextAuthのような柔軟性が必要になるケースもあるかもしれません。

• Clerkは非常に簡単にダッシュボードを作れる
• ミドルウェアの導入でセキュアな制御が可能
• スクリーンショットやデモ環境も簡単に共有可能

サービス	特徴	向いている用途
Firebase	バックエンドも兼ねたBaaS。リアルタイムDBなどもあり多機能。	モバイルアプリやリアルタイム系
NextAuth	Next.jsと親和性が高く、柔軟に構成可能だがセットアップにやや知識が必要。	自前でDB管理したい中〜上級者向け
Clerk	UI付きで簡単導入、スピーディーに認証機能が追加できる。	MVP開発、スピード重視、初心者にも◎

ミドルウェアとは

Clerkでは、Next.jsのミドルウェア機能を使って、特定ページへのアクセス制御を行います。

ミドルウェアとは、ユーザーがページにアクセスする前に実行される関数で、たとえば以下のような用途に使います。

• サブスク会員だけが見れるページの保護
• 管理者専用ページへのアクセス制限
• 未ログインユーザーのリダイレクト

これにより、サーバー側でページをレンダリングする前にアクセス権のチェックができ、無駄な処理を減らして効率的な表示が可能になります。

今回の実装では、ログアウトしたユーザーがダッシュボードにアクセスしようとした場合、ログインページにリダイレクトされるように設定しました。
この制御には、Clerkが提供しているcreateRouteMatcherを使って、特定のルートに対してミドルウェア処理を挟んでいます。

開発を通じて感じたこと

お題だけを見ると「これをゼロから作るのはハードルが高そう」と感じました。しかし、Clerkをはじめとしたツールを1つずつ導入していくと、思ったよりスムーズに進行できました。

Clerkで導入された認証ボタンのメニュー

また、Next.jsのApp Routerを使った開発は久しぶりでしたが、ディレクトリ構成や新しい設計思想に触れる良い機会となり、改めて理解を深めることができました。

まとめ

Clerkを使った民宿アプリの認証構築は、シンプルかつスピーディーに実装できる非常に良い体験でした。今後も、個人開発やPoCなどでぜひ活用していきたいと思います。

勉強会はまだ続きがあるので、次回はバックエンドの繋ぎこみ、Supabaseの実装のあたりを習得したいと思います。