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

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テーブルの行をselectやinsertできるようにしています。通常、これらの操作は、ログインしたユーザーのみが実行できるようにします。行単位セキュリティーとポリシーの詳細については、こちらのビデオをご覧ください。

ステップ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>
  )
}

リソース​