Nextjs+supabaseでTODOAPPをつくる

ピン留めされたアイテム

rajiku

システム概要

機能

認証 (サインアップ・ログイン・パスワードリセット)
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)ではこれだけ、今後追加変更する可能性はある。

rajiku

環境構築

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

rajiku

supabaseやこのプロジェクトの参照先は以下

rajiku

supabaseにサインイン

Githubアカウントでログイン

rajiku

ルートディレクトリに.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/

globals.d.ts

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

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

yarn add @supabase/supabase-js

apiの型を作成する。

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クライアントの作成

src/lib/supabase.ts

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でエラーが出てたけど上のことやったら消えた。

rajiku

トリガーの作成や関数の作成は直接クエリを書かなくてもある程度は作成できるみたいです。

rajiku

supabase AuthUi

テーマはまだ一個しかないが
今後追加予定らしい

rajiku

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

rajiku

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

一様今回作成したソースコードもあげとく
supabaseのチュートリアルまんまやけど