【初心者向け】Next.jsとSupabaseを使用したローカル開発環境の構築

はじめに

ターゲットはプログラム初心者です。
複雑にならないように記述しています。

事前準備

Node.js（v20.x）とDockerはインストールしておいてください。

Next.jsのプロジェクトを作る(with supabase)

以下のコマンドを実行してsupabaseのライブラリ入りのプロジェクトをインストール。
プロジェクト名はnext-with-supabaseに設定

npx create-next-app -e with-supabase

ログ

(base) sasaki@RyukiSasakinoMacBook-Pro Documents % npx create-next-app -e with-supabase
Need to install the following packages:
create-next-app@14.1.4
Ok to proceed? (y) 
✔ What is your project named? … next-with-supabase
Creating a new Next.js app in /Users/sasaki/Documents/next-with-supabase.

Downloading files for example with-supabase. This might take a moment.

Installing packages. This might take a couple of minutes.


added 165 packages, and audited 166 packages in 16s

36 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created next-with-supabase at /Users/sasaki/Documents/next-with-supabase
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd next-with-supabase
  npm run dev

構築されたプロジェクトのディレクトリ（/Users/sasaki/Documents/next-with-supabase/）をプロジェクトルートとして扱います。

Supabaseをローカルで立上げるための初期化

このままでは、Supabaseを立上げれられないので、Supabaseを初期化
プロジェクトルートでnpx supabase initを実行

ログ：

(base) sasaki@RyukiSasakinoMacBook-Pro next-with-supabase % npx supabase init
Need to install the following packages:
supabase@1.151.1
Ok to proceed? (y) 
Generate VS Code settings for Deno? [y/N] 
Generate IntelliJ Settings for Deno? [y/N] 
Finished supabase init.

プロジェクトルートにsupabaseディレクトリが生成されてconfig.tomlというファイルが存在することを確認。

ディレクトリ：

Supabaseをローカルで立上げる

プロジェクトルートでnpx supabase startを実行。
API URLとannon keyはこの後使用します。
ログ：

Supabaseの起動に失敗する場合

• 既にSupabaseが起動している
• Dockerが起動していない
  のいずれかの可能性が高いので、確認。

Next.jsの環境変数にSupabaseの情報を登録

プロジェクトルートにenv.localファイルを作成し、API URLとannon keyをそれぞれ登録する。

NEXT_PUBLIC_SUPABASE_URL=xxxxx
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxxxx

Next.jsをローカルで立上げ

プロジェクトルートでnpm run devを実行

ログ：

(base) sasaki@RyukiSasakinoMacBook-Pro next-with-supabase % npm run dev

> dev
> next dev

   ▲ Next.js 14.1.4
   - Local:        http://localhost:3000
   - Environments: .env.local

 ✓ Ready in 2.2s

- Local:        http://localhost:3000

のhttp://localhost:xxxxにアクセス。
環境により違う場合があるので、ログを確認してください。

あとはコードを書けばOKです。