mindrally/nextjs-typescript-tailwindcss-supabase

nextjs-typescript-tailwindcss-supabase は何をしますか？

TypeScript、TailwindCSS、Supabaseを使用した本番環境対応のWebアプリケーションを構築するための、フルスタックNext.js 14開発スキルです。

機能

• Next.js 14 App Router: 最新のサーバーコンポーネントとルーティングパラダイムを活用
• TypeScript: エンドツーエンドの型安全性
• TailwindCSS: ユーティリティファーストのCSSフレームワークによる高速なUI開発
• Supabase: データベース、認証、ストレージ、リアルタイム機能を含むバックエンドサービス

はじめ方

前提条件

• Node.js 18.17以上
• npm、yarn、またはpnpm
• Supabaseアカウント（無料枠あり）

セットアップ

1. リポジトリのクローン

git clone https://github.com/mindrally/nextjs-typescript-tailwindcss-supabase.git my-project
cd my-project

2. 依存関係のインストール

npm install
# または
yarn install
# または
pnpm install

3. 環境変数の設定

.env.local.exampleファイルを.env.localにコピーし、Supabaseの認証情報を入力します。

cp .env.local.example .env.local

必要な環境変数:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

4. Supabaseクライアントの設定

lib/supabase/client.tsファイルが自動的に生成されます。必要に応じて設定をカスタマイズしてください。

5. 開発サーバーの起動

npm run dev
# または
yarn dev
# または
pnpm dev

ブラウザで http://localhost:3000 を開いて確認します。

プロジェクト構造

my-project/
├── app/                    # App Routerのルート（ページ、レイアウト、APIルート）
│   ├── api/               # APIルート（サーバーレス関数）
│   ├── auth/              # 認証関連のルート
│   ├── layout.tsx          # ルートレイアウト
│   └── page.tsx            # ホームページ
├── components/             # 再利用可能なコンポーネント
│   ├── ui/                # プリミティブなUIコンポーネント
│   └── layout/            # レイアウト関連コンポーネント
├── lib/                    # ユーティリティ関数と設定
│   ├── supabase/          # Supabaseクライアント（ブラウザ用とサーバー用）
│   └── utils.ts           # その他のユーティリティ関数
├── public/                 # 静的ファイル
├── styles/                 # グローバルスタイル
│   └── globals.css        # TailwindCSSのインポートとカスタムスタイル
├── types/                  # TypeScriptの型定義
├── .env.local.example      # 環境変数のテンプレート
├── next.config.js          # Next.jsの設定
├── tailwind.config.ts      # TailwindCSSの設定
├── tsconfig.json           # TypeScriptの設定
└── package.json            # 依存関係とスクリプト

使い方

ページの追加

app/フォルダ内に新しいフォルダとpage.tsxファイルを作成します。

APIルートの追加

app/api/フォルダ内に新しいフォルダとroute.tsファイルを作成します。

Supabaseとの連携

• サーバーコンポーネント: lib/supabase/server.tsからcreateClientを使用
• クライアントコンポーネント: lib/supabase/client.tsからcreateClientを使用

認証

Supabaseの認証機能を使用するには:

1. Supabaseダッシュボードで認証プロバイダー（メール/パスワード、Google、GitHubなど）を有効にします。
2. app/auth/callback/route.tsでコールバックルートを設定します。
3. ログイン/サインアップフォームにはcomponents/auth/のコンポーネントを使用します。

デプロイ

Vercelへのデプロイ（推奨）

1. リポジトリをGitHubにプッシュします。
2. Vercelにインポートし、環境変数を追加します。
3. デプロイします。

その他のプラットフォーム

NetlifyやDockerなどのプラットフォームもサポートされています。詳細はプラットフォームのドキュメントを参照してください。

ライセンス

MIT