はじめに
新規プロジェクトを始めるたびに、認証（ログイン・会員登録・ソーシャルログイン）や決済（Stripe や GMO などの連携）、多言語対応（i18n）を一から実装するのは時間がかかりますし、毎回同じようなコードを書くことになりがちです。一方で、これらは多くの Web アプリに共通して必要な要素です。
本記事では、TOMOSIA Vietnam が提供する TOMOSIA Template KIT を紹介します。このテンプレートは、認証・決済・多言語・本人確認・ダッシュボードまわりが最初から組み込まれた Next.js のベースであり、プロジェクトの土台を短時間で用意したい方や、PoC を素早く出したいチームに向いています。記事では、概要・技術スタック・主な機能・アーキテクチャ・触り方・まとめの順で説明します。
目次
1. TOMOSIA Template KIT とは
TOMOSIA Template KIT は、Next.js（App Router）をベースにした フルスタック向けの production-ready テンプレート です。
主な特徴は次のとおりです。
- 認証 … メール・パスワード（Credentials）は Firebase Auth と連携。さらに Google / Facebook / Instagram / LINE の OAuth に対応しており、ログイン・登録・パスワードリセット・OTP 確認の画面が用意されています。
- 決済 … Stripe と GMO のチェックアウト・Webhook 連携が入っており、デモ用の画面から動作を確認できます。
- 多言語 … next-intl により英語・日本語に対応。ルーティングや UI の切り替えが最初から組み込まれています。
- 本人確認 … 書類（ID）のアップロード、顔キャプチャ、AI（Mistral Pixtral）による OCR まで一連のフローが含まれており、KYC 的な機能を試したい場合に参考になります。
- ダッシュボード … プロフィール編集、Kanban、ファイル管理、通知、ユーザー管理、請求まわりなど、管理画面でよく使うモジュールのサンプルが含まれています。
「認証や決済を毎回ゼロから書くのは負担が大きい」「まずは動く土台を用意してから要件を詰めたい」という方や、新規サービスや PoC を短期間で立ち上げたいチームに適しています。
2. 技術スタック
使用している主な技術は以下のとおりです。
| 分野 | 技術 |
|---|---|
| フレームワーク | Next.js 16（App Router）, React 19, TypeScript |
| 認証 | NextAuth.js, Firebase Auth |
| UI | ShadcnUI, Tailwind CSS, Radix UI |
| フォーム・バリデーション | React Hook Form, Zod |
| 決済 | Stripe, GMO（gmopg） |
| AI | Mistral（Pixtral）— 本人確認用の書類 OCR |
| その他 | TanStack Query, Zustand, next-intl |
フォームは React Hook Form と Zod でバリデーションを統一し、認証は NextAuth.js でセッション管理、実際のサインインは Firebase Auth および各 OAuth プロバイダーに任せる構成です。UI は ShadcnUI を中心にしているため、見た目やアクセシビリティを揃えつつ、必要に応じてコンポーネントを差し替えやすくなっています。
3. 主な機能の紹介（Features 一覧）
テンプレートに含まれる Features を一覧にしました。src/features/ 配下のモジュールに対応しています。
| Feature | 内容 |
|---|---|
| Auth | ログイン・会員登録・パスワード忘れ・パスワードリセット・OTP 確認。Credentials（Firebase）+ Google / Facebook / Instagram / LINE OAuth。React Hook Form + Zod でバリデーション。 |
| I18n（next-intl） | 英語・日本語。ルーティング・UI の切り替え、ロケール対応が最初から組み込み。 |
| ダッシュボードレイアウト | サイドバー、ブレッドクラム、テーマ切替（ライト/ダーク）、通知アイコン、ユーザーメニュー。保護されたページで共通利用。 |
| Profile | プロフィール編集、アバター変更、パスワード変更、セキュリティ設定、権限・ロールのアップグレード申請。 |
| Payment（Stripe） | チェックアウトセッション作成、Webhook 受信。デモ画面付き。 |
| Payment（GMO） | チェックアウト、exec-tran 連携。デモ画面・チェックアウトページ付き。 |
| Identity-verification | 書類（ID）アップロード、顔キャプチャ、Mistral（Pixtral）による OCR、本人確認フロー・API。 |
| Kanban | ボード・カラム・カード、タスク詳細（TipTap リッチテキスト）、添付、担当者、フィルター。タスク/プロジェクト管理のベースに。 |
| File-manage | ストレージ統計ダッシュボード、ファイル一覧・カテゴリ、アップロード。Firebase/S3 等への接続例として拡張可能。 |
| Hotel | ホテル向けダッシュボード、予約画面のデモ。ドメイン別の応用例。 |
| User-management | ユーザー一覧テーブル、ダッシュボード（日本地図チャート等）、追加・編集・削除モーダル。 |
| Notifications | 通知一覧、通知アイテム、通知ボタン、詳細モーダル、通知設定。 |
| Billing | 請求まわりの概要コンポーネント。 |
| Docs | Introduction、Installation、Design Pattern、各 OAuth（Google / Facebook / Instagram / LINE）の設定手順、Test Case。サイドバー・検索付き。 |
| Upload | ファイルアップロード（react-dropzone）。resumable 用に tus-js-client も利用可能。file-manage・Kanban 添付・本人確認の書類アップロードで使用。 |
| 画像処理（image） | 画像圧縮（browser-image-compression）、クロップ（cropperjs / react-cropper）、BlurHash によるプレースホルダー。本人確認・アバター等で利用。 |
| Performance | Next.js の最適化、セッションまわりの軽いチェック、Vercel React ベストプラクティスを意識した構成。バンドル・データ取得の効率化。 |
| Accessibility | aria-label・キーボード操作を考慮。ShadcnUI（Radix UI）ベースでアクセシビリティに配慮したコンポーネントを利用。 |
| Responsvie | モバイルからタブレットまでのレスポンシブ対応済み。 |
必要に応じて、上記の feature だけをコピーして他プロジェクトで利用したり、不要なものを外して土台をシンプルにしたりできます。
4. アーキテクチャのポイント
テンプレートは 5 層のディレクトリ構成 を採用しています。
-
App（
src/app/） … ルーティングとページの配置のみ。画面ごとのロジックは Features に寄せます。 -
Features（
src/features/） … 上記の認証・決済・プロフィール・Kanban・ファイル管理・通知・本人確認など、機能単位のモジュール。各 feature はcomponents/actions/hooks/types/validations（必要に応じてlibやmock）で整理されています。 -
Shared（
src/shared/） … 複数の feature から使う共通コンポーネントやユーティリティ。 -
Core（
src/core/） … 認証設定（NextAuth のオプション）、Firebase の初期化、定数、プロバイダーなど、アプリ全体の基盤となるコード。 -
UI（
src/components/ui/） … ShadcnUI 由来のボタン・フォーム・ダイアログなどのプリミティブ。
このように役割を分けることで、特定の機能（例：認証だけ、決済だけ）を別プロジェクトにコピーしたり、不要なモジュールを外したりしやすくなっています。新規プロジェクトでは、必要な feature だけを選んで土台に載せていく使い方が想定されています。
5. 触ってみる・ローカルで動かす
デモ・ドキュメント
-
アプリ・ドキュメント … https://tomosia-template-kit.vercel.app で公開されています。トップからログインや各機能に遷移でき、
/docからドキュメント（Introduction, Installation, Design Pattern, 各 OAuth の手順など）を読めます。
ローカルで動かす手順
- リポジトリをクローンする
git clone https://github.com/HieuNT44/tomosia-template-kit.git - プロジェクト直下で
.env.exampleをコピーし、.env.localとして保存する。必要に応じて Firebase / OAuth / Stripe / GMO / Mistral などのキーや URL を編集する。 -
npm installで依存関係をインストールする。 -
npm run devで開発サーバーを起動する。
認証（とくに OAuth）や決済を実際に試す場合は、各サービスのダッシュボードでリダイレクト URL や Webhook URL を設定する必要があります。具体的な手順は、上記デモサイトの /doc 内の「Installation」や各 OAuth のページに記載されているので、そちらを参照してください。環境変数の例もドキュメントで確認できます。
6. まとめ
TOMOSIA Template KIT は、認証・決済・多言語・本人確認・ダッシュボードまわりが あらかじめ組み込まれた Next.js のテンプレートです。5 層のアーキテクチャと機能単位のモジュール構成により、必要な部分だけを抜き出して他プロジェクトで再利用したり、不要な機能を外してシンプルな土台にしたりしやすくなっています。その結果、プロジェクトの土台づくりを 1〜2 週間程度 に短縮しやすく、ベストプラクティスもある程度そろった状態から開発を始められます。
Next.js で新規 Web アプリを作りたい方、認証・決済・多言語をまとめて導入したい方、あるいは PoC やプロトタイプを早く出したいチームには、とくに試す価値があると思います。
リンク