https://github.com/tf63/next-type-app

Next + Supabase タイピングアプリ
https://github.com/tf63/next-type-app

Last synced: 2 months ago
JSON representation

Next + Supabase タイピングアプリ

• Host: GitHub
• URL: https://github.com/tf63/next-type-app
• Owner: tf63
• Created: 2023-11-12T15:47:11.000Z (over 1 year ago)
• Default Branch: dev
• Last Pushed: 2023-12-18T11:37:16.000Z (over 1 year ago)
• Last Synced: 2025-02-11T15:24:44.946Z (4 months ago)
• Language: TypeScript
• Homepage: https://next-type-app-delta.vercel.app
• Size: 408 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## タイピングアプリ (仮)

![Node](https://img.shields.io/badge/Node-1.19-339933?logo=nodedotjs)

![Docker](https://img.shields.io/badge/Docker-v24.0.5-2496ED?logo=docker)

![Supabase](https://img.shields.io/badge/Supabase-1.100.1-3FCF8E?logo=supabase)

![Postgres](https://img.shields.io/badge/Postgres-16.1-4169E1?logo=postgresql)

### 概要

https://next-type-app-delta.vercel.app/

 



### 技術選定

| 技術 | 役割 |

| -- | -- |

| Next.js | フレームワーク|

| API Routes | backend |

| zustand | 状態管理 |

| CSS Modules | style |

| Supabase | DB |

| Postgres | (Supabase) |

| Vercel | ホスティング |

| Next Auth | 認証 |

| Github Auth | OAuth Provider |

| Supabase Adapter | DB Access |

 

### 基本コマンド

コンテナ周り

```

    # コンテナの立ち上げ

    docker compose up -d

    # コンテナの停止

    docker compose down

    # volumeの削除

    docker volume rm $(docker volume ls | grep -o 'next-type*')

    # nextコンテナをアタッチ

    docker compose exec next /bin/sh

```

開発サーバーの立ち上げ

```bash

    npm run dev

```

ビルド

```bash

    npm run build

```

DB接続

```bash

    # 同一ネットワークのコンテナからpostgresへ接続する場合

    psql 'postgresql://postgres:postgres@supabase_db_next-type-app:5432/postgres'

    # ローカルからpostgresへ接続する場合

    psql 'postgresql://postgres:postgres@localhost:54322/postgres'

```

Supabase周り

```

    # supabaseコンテナの起動

    supabase start

    # supabaseコンテナの停止

    supabase stop

    # remoteのリンク

    supabase link --project-ref 

    # remoteのスキーマ情報の取得

    supabase db pull

    # マイグレーションファイルの作成

    supabase migration new 

    # マイグレーションの適用

    supabase db reset

    # 型情報の作成

    supabase gen types typescript --local > frontend/types/database.types.d.ts 

    # デプロイ

    supabase db remote commit

```

乱数の生成

```

    openssl rand -base64 32

```

### 重要なリンク

next authのsupabase adapter

https://authjs.dev/reference/adapter/supabase

ローカルのsupabaseの導入

https://supabase.com/docs/guides/cli/local-development

sql -> supabase

https://supabase.com/docs/guides/database/sql-to-api

supabaseのtsクライアント

https://supabase.com/docs/reference/javascript

nextからsupabase

https://supabase.com/docs/guides/getting-started/quickstarts/nextjs

project architecture

https://dev.to/profydev/screaming-architecture-evolution-of-a-react-folder-structure-4g25#best-practices