はじめに

ゆとり世代の中野です。

さっそくチャレンジについて書いていきます。

チャレンジする背景

• チュートリアルやってみたので忘備録を残したい

チャレンジ内容

• supabase v2系チュートリアルについてまとめておく

やったこと

Next.jsのProjectを準備

• Projectの作成
Copy

pnpm create next-app プロジェクト名 --typescript

• Supabase CLIの準備する
• supabase init
• supabase start
• .env.local を作成して環境変数を設定
Copy

NEXT_PUBLIC_SUPABASE_ANON_KEY=anon key
NEXT_PUBLIC_SUPABASE_URL=API URL

必要なpackageを追加する

pnpm add @supabase/supabase-js
pnpm add @supabase/auth-helpers-react @supabase/auth-helpers-nextjs
pnpm add @supabase/auth-ui-react

Quickstart: Next.jsのコードを追加する

データベース関連の作業を行う

動作確認

• 環境を立ち上げる
Copy

pnpm run dev

結論

• http://localhost:3000/にアクセスして動作確認する
• Studio URLからAuthとDBとStorageを確認してみる
• 作成されたAccountの情報やレコードに画像が存在すればok

さいごに

• ググるとv1系の情報がワサワサでてきてv2系の情報が少なくて混乱した
• auth-helpersが全部よしなにやってくれてた

supabase/Account.tsx at master · supabase/supabase

The open source Firebase alternative. Follow to stay updated about our public Beta. - supabase/Account.tsx at master · supabase/supabase

github.com

Project set up

This example provides the steps to build a basic user management app. It includes: Supabase Database: a Postgres database for storing your user data. Supabase Auth: users can sign in with magic links (no passwords, only email). Supabase Storage: users can upload a photo.

supabase.com

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています