ハリボテTODOアプリをテンプレートとしてリポジトリを作成します。
https://github.com/shinaps/nextjs-haribote-todo-app
できました。
https://github.com/shinaps/nextjs-approuter-supabase-todoapp
git clone git@github.com:shinaps/nextjs-approuter-supabase-todoapp.git
Cloning into 'nextjs-approuter-supabase-todoapp'...
Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
remote: Enumerating objects: 44, done.
remote: Counting objects: 100% (44/44), done.
remote: Compressing objects: 100% (39/39), done.
remote: Total 44 (delta 0), reused 42 (delta 0), pack-reused 0
Receiving objects: 100% (44/44), 71.36 KiB | 445.00 KiB/s, done.npm install
npm run dev
https://supabase.com/dashboard/new
以下のページを参考に実装していきます。
https://supabase.com/docs/guides/auth/server-side/nextjs
npm install @supabase/ssrhttps://supabase.com/dashboard/project/{Reference ID}/settings/api のURLにアクセスしてProject URLとProject API keysのanon key を.env.localに転記します。
# .env.local
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
以下の手順は今回はスキップ可能です。スキップする場合はcreateBrowserClient<Database>
をcreateBrowserClientのように書き換えて使用してください。
Supabaseの型情報をクライアントで使用できるようにする（オプショナル）
https://supabase.com/docs/reference/cli/supabase-gen-types-typescript
https://supabase.com/docs/reference/javascript/typescript-support#generating-typescript-types
npm install supabase
npx supabase login
supabase init
supabase link --project-ref {Reference ID}
supabase gen types typescript --linked > supabase/database.types.tsこれでsupabase/database.types.ts に型の情報が生成されます。
supabase link --project-ref {Reference ID} の時にDBのパスワードが求められるので、忘れてしまった場合は以下のボタンをクリックすればリセットできます。
https://supabase.com/dashboard/project/{Reference ID}/settings/databaseのURLからページにアクセスできます。
以下のようにジェネリック型にDatabaseという型を渡すことで、データベースの型を参照できるようになります。
import { createBrowserClient } from "@supabase/ssr";
import { Database } from "../../../supabase/database.types";
export const createClient = () => {
return createBrowserClient<Database>(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
);
};今回は１種類（Server ActionsとRoute Handlersで使用するクライアント）しか作成する必要はありませんが、実際にアプリケーションで使用する場合は、３種類作成することになると思います。その３種類というのは以下の３つです。
- Client Componentsで使用するクライアント
- Server Componentsで使用するクライアント
- Server ActionsとRoute Handlersで使用するクライアント
サーバーサイドで使用するクライアントが２種類あるのは以下のように、Server ComponentsではCookieの書き込みができないという特徴があるからです。
| Cookieの読み取り | Cookieの書き込み | |
|---|---|---|
| Server Components | できる | できない |
| Route Handlers | できる | できる |
| Server Actions | できる | できる |
Server ActionsとRoute Handlersで使用するクライアントにはcookie-writable-server-client.ts という名前をつけましたが、他にいい名前があればそれを使用してください。
ミドルウェアでは Cookieの情報を使用してuserの情報を取得し、userが取得できない場合はサインインのページにリダイレクトする処理になっています。
プロバイダーの設定（後で行います）でConfirm emailがONになっている場合、メールアドレスの確認が完了していないユーザーはサインアップできていてもNULLになるので気をつけてください。
今回はメールアドレスの検証の実装は行わないので、
https://supabase.com/dashboard/project/{Reference ID}/auth/providers のURLにアクセスし、Auth Providers > Email > Confirm emailをOFFにします。
自分はわかりやすいのでsrc/app/services/auth/sign-in.action.ts という名前にして関数名にもActionをつけてますが、actionを付けないといけないという決まりはありません。
サインイン用のactionとほぼ同じです。
プログレッシブエンハンスメントは捨てました。use clientを使います。
ここは以下のページを見ていただければわかると思うので、説明は省きます。
わからなかったらコメントかDMしてください。