Nestjs 13 App router + Supabase + Prisma でTodoアプリ試す

このガイドをベースに作る

基本、上記のドキュメントの通りに進めれば接続は確認できた

ただ、上記ではgetServerSidePropsを使ってsupabaseのAPIからデータを取得しているが、App routerの場合

import { supabase } from '@/libs/supabase';

const Home = async () => {
  const { data } = await supabase.from('countries').select();

  console.log({ data });

  return (
    <main className="pt-40 grid place-content-center">
      <div>
        <h1 className="text-2xl">Todo list</h1>
        <p>Some task yet</p>

        <ul className="my-10 list-disc">
          {['Work hard'].map((v) => (
            <li key={v}>{v}</li>
          ))}
        </ul>
      </div>
    </main>
  );
};

export default Home;

こんな感じでいきなり書けちゃう

以下の記事にもあるが、getServerSidePropsみたいなやつは新しいAPIに置き換わってる。

色々書かれてるが、要するに基本はサーバーコンポーネントとして扱われるので（tsxファイルの冒頭に"use client"指定しない限り)、そこでは上記のようにコンポーネントでasyncしてサーバーのコードが書けちゃう。

こばしゅん

Basic認証これでいけた

こばしゅん

npm install prisma --save-dev
npx prisma init --datasource-provider postgresql # postgresql使いたいので

こばしゅん

schema.prisma

datasource db {
  provider          = "postgresql"
  url               = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User?   @relation(fields: [authorId], references: [id])
  authorId  Int?
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

npx prisma migrate dev --name init

こばしゅん

Using Supabase Auth with Prisma