For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ja/docs/web/tech-stack.md (or send Accept: text/markdown).

技術スタック

キットを支える技術とそれぞれの役割。

このガイドについて質問

始める前に

[ファイル] → [フォルダーを開く] を使用して、Visual Studio Code でダウンロードした supastack プロジェクトを開き、[ターミナル] → [新しいターミナル] を選択します。リポジトリルートは、package.json、アプリ、およびパッケージを含むフォルダーです。そこで以下のコマンドを実行し、ターミナルを開いたままにしておきます。コマンドが認識されない場合は、続行する前にツールのインストールガイドを完了してください。

まずプラットフォームのチュートリアルをお読みください。サーバーは、ブラウザまたは電話のリクエストに応答するアプリプロセスです。 Web は apps/web/.env.local を読み取り、Expo は apps/mobile/.env.local を読み取り、データベース移行コマンドは root .env を読み取ります。データベースなしの /dashboard デモは、Postgres の移行が必要な実際の /auth アカウントとは別のものです。電話またはデスクトップのみのチェックアウトには、別途実行される Web バックエンドが必要です。

corepack pnpm --filter @supastack/web dev

アプリケーションスタック

Web アプリは共有 TypeScript パッケージで構成された Next.js アプリケーションです — 同じパッケージが Expo モバイルアプリにも使われます。プロダクトの UI はデザイントークン上の CSS Modules を使うため、デバッグすべきランタイム CSS-in-JS はなく、オブジェクトストレージは S3 互換です。以下のツールが意図的なデフォルトです。

Next.js + React

Web アプリは App Router を備えた Next.js 16 と React 19 サーバーコンポーネントで動作します。

TypeScript + Turborepo

TypeScript の strict モードは pnpm ワークスペース全体に適用され、Turborepo がビルドを調整します。

Better Auth

Better Auth がアイデンティティエンジンです。標準化したいチーム向けに Auth.js エンジンも利用できます。

Better Authbetter-auth.com

Drizzle + PostgreSQL

永続化は PostgreSQL 上の Drizzle ORM を通じて行われます。すべてのレコードが流れるスキーマとヘルパーです。

請求

請求は Stripe がデフォルトで、Lemon Squeezy アダプターも同梱されています。

Trigger.dev

バックグラウンドジョブは Trigger.dev で実行されます。

Trigger.devtrigger.dev

トランザクションメール

トランザクションメールは Resend または AWS SES 経由で送信されます。

Resendresend.com

Sentry + PostHog

オブザーバビリティは Sentry と PostHog で構成されます。

Expo

Expo モバイルアプリは同じ TypeScript パッケージを利用するため、コントラクトの変更は両方のサーフェスに対して同時に型チェックされます。Expo は iOS と Android 向けに提供されます。

Expoexpo.dev

共有モジュール

横断的な各機能は小さなコントラクトを持つパッケージに格納されています: auth、db、billing、ai、jobs、email、storage、observability、config、i18n、api。アプリケーションがそれらを組み合わせ、プロダクト固有のドメインロジックはキットの外に置かれます。

プロバイダーに依存する各モジュールには fake またはローカルアダプターが付属し、デフォルトのテスト・開発サイクルが有料サービスを呼び出すことはありません。

検証ツール

Vitest がユニット・統合の動作をカバーし、Playwright がブラウザフローをカバーし、ESLint と Prettier がコードを一貫させます。決定的なスイートはプロバイダーの認証情報なしで実行でき、実プロバイダーによる受け入れは別の任意パスです。

corepack pnpm test          # deterministic unit + integration
corepack pnpm check         # lint, types, tests, format
corepack pnpm build         # production builds
corepack pnpm test:e2e      # browser flows