Nextjs13最新バージョンからsupabaseのテーブルを参照する方法
ここでは、Next.js13とsupabaseの接続方法とデータ参照の方法についてみていきます
Nextjsの最新バージョンからデフォルトでServer Componentが採用されているため、コンソール等はサーバのログにしか出てこないので気をつけてください。
また、ボタンなどのUIをしようする際は、’use client’ 記載してクライアントコンポーネントとしてください。
⚠️Nextjs13のapp router等については特別触れないので、詳しく知りたい方は公式ドキュメントを参照してください。
環境構築
まずNextJSのテンプレートから作成していきましょう。
npx create-next-app@latest
テンプレートが作成できたら、作業ディレクトリに移動してVSCodeを立ち上げましょう。ディレクトリ構造を見るとsrc/appの中にpage.tsx, globals.css, layout.tsxというファイルが作成されていると思います。こちらは全て下記のように書き換えておいてください。
import Image from 'next/image'
export default function Home() {
return (
<div>
Home
</div>
)
}
@tailwind base;
@tailwind components;
@tailwind utilities;
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
supabaseの設定
次にsupabaseの設定をしていきます。supabaseが何かわからない方や登録方法がわからない方は別の記事を参照してください。
この画面からNew Projectで新しくプロジェクトを作成しましょう。プロジェクトの作成が完了したら、VSCodeに戻ってください。
supabaseClientの作成
まずはモジュールのインポートを行います。以下のコマンドをターミナル内で実行してください
npm install @supabase/supabase-js
また.env.localファイルを作成し、環境変数を格納してください
環境変数はここで確認できます
NEXT_PUBLIC_SUPABASE_URL='https:⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️'
NEXT_PUBLIC_SUPABASE_ANON_KEY='⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️'
srcディレクトリ直下にutilディレクトリを作成します。その直下にcreateClient.tsxとし、下記コードを作成してください。.env.localで設定した環境変数を呼び出してsupabase Clientを作成します。
import { createClient } from '@supabase/supabase-js'
const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL!
const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
supabaseでのテーブル作成
それではまたsupabaseに戻りましょう。テーブルの作成を行います。SQLを書いて作成もできますが、今回はUIから作成します。
テーブルの名前を決めます。今回はstudentsという生徒情報を格納するテーブルを作成します。Columnsにテーブルに必要な項目とデータ型を設定します。今回は、id(PK), name, gender,createdAtとしましょう。データ型はそれぞれ、int型, string型, string型,timestamp型としてください。Saveを押すとテーブルが作成されます。
サイドバーが閉じたら、画面中央上部のInsertボタンを押し、実際のデータを格納していきます。
２、３行分入れれば十分です。データの登録が終わったら、VSCodeに戻ります。
データを取得しよう
page.tsxをappディレクトリの直下に作成するか、ルートから階層を下げてデータ取得したい場合は、app/students/page.tsxとしてファイルを作成し、その中に下記の記述をしてください
import { supabase } from "@/util/supabaseClient";
export default async function Index() {
// データ取得
const { data: students } = await supabase
.from('students')
.select()
console.log(reservations)
return (
<div>
Index
</div>
);
}
先ほど作成したsupabaseClientからsupabaseをインポートしてきます。
supabase.from('students').select()
で取得できます。なおstudentsはテーブルの名前が入ります。またselectの引数にはどの項目のデータを取得するのか決めることができます。特に指定がない場合全ての項目が対象になります。
また右上のAPIのボタンを押すと詳しく、メソッドの使い方など記載されているので確認してみてください。データインサートやデータ削除などについても確認できます。これでコンソールに先ほど作成したデータが配列で取得できていると思います。
Discussion