記事の趣旨

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

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

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

2. githubにリポジトリ追加

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

git init
git add .
git commit -m "initial commit"
git remote add origin git@github.com:hoge/fuga-project.git
git push -u origin master

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

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

4. Supabaseの設定

Supabaseでプロジェクトの作成
初期設定
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を追加
npx supabase login
npx supabase init
1. supabase/ディレクトリに.gitignore, config.toml, seed.sqlファイルが作成される
ローカル用の設定
1. npx supabase link --project-ref <Reference ID>
  1. Project Settings > General
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にファイルを追加
ライブラリのインストール
1. npm i @supabase/ssr @supabase/supabase-js
2. utils/supabase/にclient.tsとserver.tsファイルを追加する
Testファイルの追加
1. npx supabase migration new <migration name>

5. Vercelのデプロイ

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

6. ESLintの設定

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
.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の設定

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