メインコンテンツまでスキップ

Vercel

このガイドでは、Vercelのダッシュボードを使って、Supabaseと統合されたNext.jsプロジェクトを作成する手順を説明します。Next.jsのスターター・テンプレートを使用することで、ダッシュボードから離れることなく、自動的にGitHubの新しいリポジトリにフォークできます。

Vercelのアカウントをお持ちでない方は、こちらでアカウントを作成してください。

ステップ1:Supabaseプロジェクトを作成

このガイドでは既存のSupabaseプロジェクトを使用できましたが、スクラッチからtodoデモを作成します。まず、Supabaseに移動します。Sign Inをクリックし、GitHubで認証してログインするか、新しいアカウントを登録します。

SupabaseダッシュボードからNew projectをクリックし、組織(organization)を選択します。

注:最初に組織を作成する必要がある場合もあります。

プロジェクトにname(名前)とpassword(パスワード)を付け、潜在的なユーザーに近いregion(地域)を選択し、Create new projectをクリックします。

Create a Supabase project

Supabaseはインフラストラクチャを設定するのに数分かかります。

設定が完了したら、サイドバーメニューのSQL Editorを開き、New queryをクリックします。

すると、New queryという名前の新しいSQLスニペットが作成されます。以下のコードをコピー&ペーストし、Runをクリックします。

create table todos (
id bigint generated by default as identity primary key,
title text,
is_complete boolean default false,
created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

alter table todos enable row level security;

create policy "Anyone can view todos" on todos for
select using (true);

create policy "Anyone can add new todos" on todos for
insert with check (true);

insert into todos(title)
values
('Create Supabase project'),
('Create Vercel project'),
('Install Supabase integration');

これにより、新しいtodosテーブルが作成され、行単位セキュリティーが有効になります。データの選択と挿入のためのポリシーが追加され、いくつかのサンプルの行が追加されます。

注:この例では簡単にするために、誰でもtodosテーブルの行をselectinsertできるようにしています。通常、これらの操作は、ログインしたユーザーのみが実行できるようにします。行単位セキュリティーとポリシーの詳細については、こちらのビデオをご覧ください。

ステップ2:Vercelプロジェクトを作成

VercelダッシュボードからNew Projectをクリックします。

Create new Vercel project

Clone TemplateメニューでNext.jsをクリックします。

Clone Next.js template

Create Git Repositoryセクションで、GitHubをクリックします。GIT SCOPEでユーザー名を選択し、プロジェクトの名前を入力します。レポジトリーをprivate(プライベート)にするか、public(パブリック)にするかを選択して、Createをクリックします。

New GitHub repo settings

これで新しいGitHubリポジトリーが作成され、Next.jsのスターターのプロジェクトがクローンされてコミットされます。それから、新しいプロジェクトがビルドされてVercelにデプロイされます。

Congratulations画面にリダイレクトされたら、Go to Dashboardをクリックします。

SettingsからIntegrationsに移動し、Browse Marketplaceをクリックします。

Supabaseを検索し、Supabaseのインテグレーションをクリックします。

Supabase integration

Add Integrationをクリックします。Vercel Scopeのドロップダウンからアカウントを選択し、CONTINUEをクリックします。

Choose scope

Specific Projectsを選択し、ドロップダウンから新しいVercelプロジェクトを選択して、Add Integrationをクリックします。

Choose project

Supabaseポップアップのドロップダウンから新しいVercelプロジェクトとSupabaseプロジェクトを選択します。

Supabase integration

ステップ4:GitHubリポジトリをクローン

このプロジェクトをローカルで実行するには、Vercelが作成したリポジトリをクローンするのが一番早い方法です。

VercelプロジェクトのOverviewページに戻り、View Git Repositoryをクリックします。

Vercel Project Dashboard

すると、GitHubリポジトリーが開きます。ここで、Codeの隣にある矢印をクリックし、ドロップダウンからURLをコピーします。

GitHub repo url

ターミナルウィンドウまたはCLIを開き、以下のコマンドを実行してGitHubリポジトリーをクローンします。

git clone your-repo-url.git

お好みのコードエディターでプロジェクトを開き、pages/index.jsの内容を以下のように更新します。

import styles from '../styles/Home.module.css'

export default function Home() {
return <div className={styles.container}>working</div>
}

ローカルの開発サーバーを起動します。

npm run dev

http://localhost:3000にアクセスして、プロジェクトが動作することを確認します。

ステップ4:Vercelから環境変数を引き出す

まず、VercelのCLIツールを使ってVercelにログインする必要があります。

npx vercel login

すると、Vercelをインストールしてもいいか尋ねられます。yと入力してEnterを押します。

次に、Continue with GitHubを選択してVercelを認証する必要があります。

すると、ブラウザウィンドウが開き、GitHubアカウントで認証します。

次に、Vercelプロジェクトをリンクします。

npx vercel link

画面の指示に従って、Vercelプロジェクトをリンクします。

Link project from Vercel

環境変数をVercelプロジェクトからコピーします。

npx vercel env pull

Supabaseの環境変数を含む.envファイルが作成されます。このファイルの名前を.env.localに変更し、gitから自動的に無視するようにします。

ステップ5:Supabase.jsをインストール

supabase-jsライブラリをインストールします。

npm i @supabase/supabase-js

/utils/supabase.jsという新しいファイルを作成し、以下の内容を追加します。

import { createClient } from '@supabase/supabase-js'

export default createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

/components/NewTodo.jsという新しいファイルを作成し、次の内容を追加します。

import { useState } from 'react'
import supabase from '../utils/supabase'

export default ({ reload }) => {
const [title, setTitle] = useState('')

const addTodo = async (e) => {
e.preventDefault()
await supabase.from('todos').insert({ title })
reload()
setTitle('')
}

return (
<form onSubmit={addTodo}>
<input value={title} onChange={(e) => setTitle(e.target.value)} />
</form>
)
}

このコンポーネントは、Supabaseに新しいtodoを書き込む役割を果たします。

pages/index.jsに新しいコンポーネントをインポートして、Todoのリストを表示してみましょう。

import { useState, useEffect } from 'react'
import styles from '../styles/Home.module.css'
import supabase from '../utils/supabase'
import NewTodo from '../components/NewTodo'

export default function Home() {
const [todos, setTodos] = useState([])

const fetchTodos = async () => {
const { data } = await supabase.from('todos').select('*')
setTodos(data)
}

useEffect(() => {
fetchTodos()
}, [])

return (
<div className={styles.container}>
<NewTodo reload={fetchTodos} />
{todos.map((todo) => (
<p key={todo.id}>{todo.title}</p>
))}
</div>
)
}

リソース