Nextjs+supabaseでTODOAPPをつくる

システム概要

機能

• 認証 (サインアップ・ログイン・パスワードリセット)
• TODOのCRUD

以下に環境、使用言語、使用技術について記載

環境

• VsCode
• node v16.17.0
• yarn v1.22.19

使用言語

• Typescript v4.8.4

ライブラリ・フレームワーク

• next v12.3.1
• react v18.2.0
• react-dom v18.2.0
• @supabase/supabase-js v2.0.5
• eslint v8.26.0
• eslint-config-next v12.3.1
• eslint-config-prettier v8.5.0
• prettier v2.7.1

現段階(2022/11/03)ではこれだけ、今後追加変更する可能性はある。

環境構築

ts-baseからNextjsの環境をクローンする
下記は私が作成したBASEプロジェクトなので普通にNextjsの環境をつくればいい。

git clone https://github.com/RajikuBlanc/Nextjs-ts-base.git todo-app-supabase 

cssはEmotionを使用したいので私はEmotionのBaseをcloneする

git clone withEmotion https://github.com/RajikuBlanc/Nextjs-ts-base.git todo-app-supabase

クローンしたら移動して、インストール

cd todo-app-supabase

yarn install

srcフォルダ内に以下を作成

• components
• lib
• hooks
• types

cd src
mkdir components,lib,hooks,types

supabaseやこのプロジェクトの参照先は以下
https://zenn.dev/n_o_n_a_m_e/books/de49cce3d044c8

supabaseにサインイン

Githubアカウントでログイン

ルートディレクトリに.env.localを作成

URLとAPIKEYを.env.localに貼り付け

NEXT_PUBLIC_SUPABASE_URL= "https://hrmxexukyiwxkkgkkkuy.supabase.co"

SUPABASE_SECRET_KEY= "見せたらダメなやつ。各自記入"

envの型付け

ルートディレクトリにglocbals.d.tsを作成。
https://maku.blog/p/r8iry9g/

declare namespace NodeJS {
  // 環境変数名の定義
  interface ProcessEnv {
    /** 環境変数名と型 */
    readonly NEXT_PUBLIC_SUPABASE_URL: string;
    readonly SUPABASE_SECRET_KEY: string;
  }
}

supabaseのライブラリをインストール

yarn add @supabase/supabase-js

apiの型を作成する。

https://supabase.com/docs/guides/api/generating-types
supabaseにログインする。

npx supabase login

上記コマンドを実行するとコンソールに以下が出力されるので、
URLをクリックして遷移する。

You can generate an access token from https://app.supabase.com/account/tokens
Enter your access token:

アクセストークンを作成して貼り付けてエンターを押すとログインできる。

以下のコマンドを実行することdatabaseの型ファイルが作成できる。
$PROJECT_IDは各自読み替える必要がある。
確認方法としてはsupabaseの今回作成したプロジェクトをクリック
URLのproject/以降が$PROJECT_IDになる。
今回の自分のプロジェクト場合はhrmxexukyiwxkkgkkkuyになる。

https://app.supabase.com/project/hrmxexukyiwxkkgkkkuy

npx supabase gen types typescript --project-id "$PROJECT_ID" --schema public > src/types/supabasetype.ts

コマンドを実行後実際に作成されているか確認。
これ最初にやっていいんかわからん。
ファイルの中身見てもあんまり理解できない。

supabaseクライアントの作成

import { createClient } from '@supabase/supabase-js';
import { Database } from '../types/supabasetype';

const supabase = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.SUPABASE_SECRET_KEY,
);

自分の環境だと参照したブログのままだと、envでエラーが出てたけど上のことやったら消えた。
https://github.com/supabase/supabase/discussions/3218#discussioncomment-2021448

トリガーの作成や関数の作成は直接クエリを書かなくてもある程度は作成できるみたいです。
https://dev.classmethod.jp/articles/supabase-triggers/

supabase AuthUi
https://supabase.com/docs/guides/auth/auth-helpers/auth-ui#predefined-themes
テーマはまだ一個しかないが
今後追加予定らしい

https://supabase.com/blog/supabase-js-v2

apiの使い方が少し変わったみたい
時折読替えの必要があるかもしれない

https://supabase.com/docs/guides/with-nextjs
ずっと認証ができんくて止まってた
これのままやったらできた
ただ、supabaseのコンポーネント使ってたりするから使わずに実装する方法も探るべきだと思う
テーマ変えたりできると思うんだけど
コンポーネント使うだけでログインとサインアップとログアウト実装できるのはちょっと強すぎではないか？

一様今回作成したソースコードもあげとく
supabaseのチュートリアルまんまやけど
https://github.com/RajikuBlanc/supabase-auth-test