SupabaseからNext.jsへデータを取得する（CSR・SSR）

npm i -D prisma
npm i @prisma/client

npx prisma init

DATABASE_URL="postgres://postgres.[Reference ID]:[YOUR-PASSWORD]@aws-0-ap-northeast-2.pooler.supabase.com

{
  "scripts": {
		// ...
    "postinstall": "prisma generate"
	}
}

npx prisma db pull

generator client {
  provider = "prisma-client-js"
}
 
datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}
 
model Tag { // 추가
  id       BigInt     @id @unique @default(autoincrement())
  name     String     @default("")
}

npx prisma generate

npx prisma db push

npx prisma generate

const { PrismaClient } = require("@prisma/client");
import { NextResponse, NextRequest } from "next/server";
 
const prisma = new PrismaClient();
 
export async function GET() {
  try {
    return NextResponse.json( {data: await getTags()}, { status: 200 });
  } catch (error) {
    return NextResponse.json(
      { error: error || "Tags not Found" },
      { status: 405 },
    );
  }
}
 
async function getTags() {
  const Tags = await prisma.tag.findMany({
    orderBy: {
      id: "asc",
    },
  });
  return Tags;
}

export const Page = async () => {
	let tags;
  try {
    tags = await fetch(
      `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/tag`,
      { next: { revalidate: 60 } },
    )
      .then((res) => res.json())
      .then((data) => data.data);
  } catch (e) {
    tags = [];
  }
	return (
		<div>
			{tags.map((tag) => (
				<div key={tag.id}>
					<h1>{tag.name}</h1>
				</div>
			))}
		</div>
	);
};

"use client";
import { useState, useEffect } from "react";
 
export const Page = () => {
	const [tags, setTags] = useState([]);
	useEffect(() => {
		fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/tag`)
			.then((res) => res.json())
			.then((data) => setTags(data.data));
	}, []);
	return (
		<div>
			{tags.map((tag) => (
				<div key={tag.id}>
					<h1>{tag.name}</h1>
				</div>
			))}
		</div>
	);
};

npm i @supabase/supabase-js @supabase/ssr

NEXT_PUBLIC_SUPABASE_URL=https://[your-project-id].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=[your-anon-key]

import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { cookies } from "next/headers";
 
export const createClient = () => {
  const cookieStore = cookies();
 
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options });
          } catch (error) {
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: "", ...options });
          } catch (error) {
          }
        },
      },
    },
  );
};

import { createClient } from "@supabase/supabase-js";
 
export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
);

import { createClient } from "@/utils/serverclientSSR";
interface Tag { // 데이터의 타입 정의
	id: number;
	name: string;
}
 
const getData = async () => {
  const supabase = createClient();
  const { data }: { data: Tag[] } = await supabase
    .from("Tag") // 테이블 이름
    .select(); // 모든 열의 데이터 가져오기
  return data;
};
 
export const Page = async () => {
	const tags = await getData();
	return (
		<div>
			{tags.map((tag) => (
				<div key={tag.id}>
					<h1>{tag.name}</h1>
				</div>
			))}
		</div>
	);
};

"use client";
import { supabase } from "@/utils/serverclientCSR";
import { useEffect, useState } from "react";
interface Tag { // 데이터의 타입 정의
	id: number;
	name: string;
}
 
export const Page = () => {
	const [tags, setTags] = useState<Tag[]>([]);
	useEffect(() => {
		const getData = async () => {
			const { data }: { data: Tag[] } = await supabase
				.from("Tag") // 테이블 이름
				.select(); // 모든 열의 데이터 가져오기
			setTags(data);
		};
		getData();
	}, []);
	return (
		<div>
			{tags.map((tag) => (
				<div key={tag.id}>
					<h1>{tag.name}</h1>
				</div>
			))}
		</div>
	);
};

NEWNAME_DATABASE_URL="postgres://postgres.[Reference ID]:[YOUR-PASSWORD]@aws-0-ap-northeast-2.pooler.supabase.com"

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