Next.jsとSupabaseの個人開発スタートアップ

記事の趣旨

自分が個人開発するときの備忘録

1. プロジェクトの初期化

npx create-next-app . --eslint --app

2. githubにリポジトリ追加

1. githubでリポジトリ作成
2. 以下のコマンド実行

git init
git add .
git commit -m "initial commit"
git remote add origin [e-mail]:hoge/fuga-project.git
git push -u origin master

3. error, loading, not-found ページの作成

該当のapp/***.tsxファイルの作成

4. Supabaseの設定

1. Supabaseでプロジェクトの作成
2. 初期設定
   1. .env.localファイルの作成
      1. Project Settings > API (https://supabase.com/dashboard/project/<project_id>/settings/api)に遷移
   2. NEXT_PUBLIC_SUPABASE_URLとNEXT_PUBLIC_SUPABASE_ANON_KEYを追加
3. npx supabase login
4. npx supabase init
   1. supabase/ディレクトリに.gitignore, config.toml, seed.sqlファイルが作成される
5. ローカル用の設定
   1. npx supabase link --project-ref <Reference ID>
      1. Project Settings > General
6. CI/CD (github action)用の設定
   1. github secrets(リポジトリ > Settings > Secrets and variables > ActionsN)に遷移
   2. SUPABASE_ACCESS_TOKEN, SUPABASE_REFERENCE_ID, SUPABASE_DB_PASSWORDを追加
      1. SUPABASE_ACCESS_TOKEN: Dashboard(Home) > Access Tokens
   3. .github/workflows/supabase-migrate.ymlにファイルを追加
7. ライブラリのインストール
   1. npm i @supabase/ssr @supabase/supabase-js
   2. utils/supabase/にclient.tsとserver.tsファイルを追加する
8. Testファイルの追加
   1. npx supabase migration new <migration name>

5. Vercelのデプロイ

1. .env.localにある環境変数を"Environment Variables"に追加したうえでdeployする

6. ESLintの設定

1. npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
2. .eslintrc.jsonの設定 <- いずれESLint v9用に移行する

7. Prettierの設定

npm install --save-dev --save-exact prettier
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
npx prettier . --write

8. faviconの設定

1. Favicon Generator for perfect icons on all browsers | RealFaviconGeneratorでsvgファイルをinputして、favicon packageをダウンロードする
2. app/配下にfavicon.ico、icon.svg、apple-icon.pngをペーストする(必要に応じてファイル名を変える)