Zenn
🥝

[Next.js15][React18]supabaseのセットアップ方法とkey設定をする方法

2024/12/09に公開
Next.js
PostgreSQL
React
Database
Supabase
tech

内容

  • supabaseを自身のプロジェクトに導入
  • シークレットキーを.envファイルで管理する方法
  • Next.jsプロジェクトを作成できる　※別記事リンク参照

この記事で学べること

  1. supabaseのアカウント作成
  2. supabaseプロジェクトの作成
  3. supabaseデータテーブルの作成
  4. プロジェクトのkey確認方法とkey設定

筆者の環境仕様

'24/12/7 現在

カテゴリ 技術
PC Mac Book Air M1
OS macOS Sequoia 15.1.1
node.js version 10.8.2
next.js version 15.0.4
Text editor Wind Surf

手順

  1. supabaseにアクセルし、アカウントを作成する
  2. supabaseプロジェクトを作成する
  3. supabaseデータテーブル作成方法を確認
  4. プロジェクトのkey確認方法とkey設定
  5. 動作するにあたって現状の注意点

1. supabaseにアクセスし、アカウントを作成する

chromeなどのブラウザでsupabaseと検索するとおそらく一番上に出てきますので、公式サイトを開いてください。

ここでStart your projectを押してもらうと、アカウント作成ページに飛びますのでアカウントを作成してください。(Githubのアカウントを持っている人はそのままAuthできます。）

続いて、New organizationの設定になります。

ここでは管理者を設定することができます。
上の欄から

  • チーム名
  • 区分（個人やスクールや企業など）
  • 無料プランか有料プランか

になります。

基本は無料で使えますが、プロジェクトが増えて管理するデータベースの数が増えたり、データ量が増えると有料対応になるそうです。各自プロジェクト毎に確認してみてださい。（個人レベルであればフリープランでいけると思います。）

2.supabaseプロジェクトを作成する

続いて、New Projectの作成になります。

上の欄から

  • 管理者
  • プロジェクト名
  • パスワード（重要）
  • 国

になります。

管理者欄は先ほど作成した管理者が選択できると思います。

ここで一番重要なところは、パスワードの管理になります。このパスワードはこの後フロントエンドと紐付ける際に必要なものになりますので、必ずメモしておいてください。

3. supabaseデータテーブルの作成方法の確認

左に出てくるサイドバーからTable Editorを選択するとテーブルページに飛びます。
ここから手動でデータベースを作成することもできますし、フロントエンドと連結してデータを保管することもできます。

今回はデータベースの直接の入力はテーマから少し外れてしまいますので割愛します。

4. プロジェクトのkey確認方法とkey設定

ここが今回の一番重要なポイントで、一番間違えが多いところになります。

4-1. プロジェクトファイルに.envファイルを作成する

今回は、sampledevファイル直下に.envファイルを作成します。

next.jsプロジェクトの作成方法は別途作成してありますので、まだの方はご確認ください。

https://zenn.dev/kame_koki/articles/39d05c7b8a5a8b

4-2. supabaseのkeyの確認の方法

左のサイドバーから歯車アイコンを選択してもらい、その中のDatabaseとAPIの項目がそれになります。

4-3. .envファイルにkeyを設定する

.envファイルに項目として、NEXT_PUBLIC_SUPABASE_URL,NEXT_PUBLIC_SUPABASE_ANON_KEY,DATABASE_URLを設定します。

実際の書き方としては、

.env
NEXT_PUBLIC_SUPABASE_URL = [APISettingページのURL欄の文字列]

NEXT_PUBLIC_SUPABASE_ANON_KEY = [Project API Keysのanon public の文字列]

DATABASE_URL="[DatabaseSettingページのConnectingString の文字列]"

ここで、DATABASE_URLを入力する際に[YOUR_PASSWARD]という文字列があるのですが、ここは上記で説明した、プロジェクト作成時のパスワードをそのまま記入してください。

5. 動作するにあたって現状の注意点

結論

supabaseのアカウント作成とデータテーブルの作成方法の確認、シークレットキーを.envファイルで管理することができる。

この手順で、バックエンドのデータベースを作成することができたので、ここからORMやNext.jsのrooter設定をし、紐付けることで実際にフロントエンドとのAPI送受信ができるようになる。

参考資料

Next.js14で掲示板Webアプリケーションを作ってみよう【Supabase/react-hook-form/zod/shadcnを利用】　youtube/Shin Coding Tutorial様

Discussion