はじめに

Next.js + Supabase を使ってチーム開発等で使える .env を GitHubリポジトリに紐づけて共有・保存出来るWebアプリ を作成しました。

こちらが デプロイしたアプリケーション になります。

こちらが EnvHub自身のGitHubリポジトリ になります。

V2アップデート後の紹介記事です

V2アップデート後の紹介記事を作成しました！
以下がリンクとなります！

このウェブアプリを利用することによって生じるあらゆる損害や損失に対して、一切の責任を負いません

・チーム開発時 にコード共有は GitHub を使うが、envファイルの共有 は チャットツールでのファイル共有 を使っており、envファイル自身も共有できたら良いのにな と思ったからです。

・アップロード側

・ダウンロード側

1. 基盤側
・Next.js (App Router)
・@supabase/ssr

2. フロントエンド側
・react-dropzone
・react-modal
・react-spinners
・react-toastify
・sharp -> 開発サーバ立ち上げには必要無かったのですが、build時に必要でした。

3. グローバルステート管理
・zustand

4. バックエンド側
・zod
・server-only

・ハイドレーションを発生させないよう 出来るだけ サーバコンポーネント に寄せたところというところと
・セキュアにしたくて Supabaseへのアクセス を 全てサーバ側 からにして ロジックを隠している ところを頑張りました。

個人リポジトリ だけが envファイル共有 となっており、
orgnizationのリポジトリ が envファイル共有 の対象としなかったことです。

これは GitHub REST API の 時間毎の回数制限 と レンダリング時の複数回にわたるデータフェッチがボトルネックになること を危惧したからです。

さいごにこの開発のために学習した ライブラリの使い方 を記事にしているのでリンクを張っておきます。