이전에 쇼핑몰을 만드는 프로젝트를 React로 개발했었다. 이때 SPA이기 때문에 상품마다의 정보를 담은 meta tag를 작성할 수 없다는 점이 아쉬웠다. React에서 동적 meta tag를 설정할 수 있도록 시도해보았지만 모든 상품에 적용하는 것이 어려워 진행을 더 하지 못했다.
Next.js 강의를 들으면서 Next.js를 사용하면 이러한 문제를 해결할 수 있겠다라는 생각을 하게 되었고 더불어 백엔드까지 함께 진행해보고 싶어 Next.js를 활용해서 쇼핑몰 프로젝트를 새롭게 진행해보고자 한다.

앞서 제목에서 보았다시피 Next.js+TypeScript+Tailwind CSS+Supabase를 사용할 계획이다.

Next.js 세팅

설치

npx create-next-app -e with-supabase

Supabase

데이터베이스와 REST API를 구현하기 위해 어떤 방법을 선택하면 좋을지 고민하던 중 Supabase를 알게되었다.

Supabase는 BaaS로 웹 애플리케이션에서 클라우드 기반의 백엔드 서비스를 활용할 수 있게 해준다.
DB, 인증, 스토리지 기능 등을 제공할 뿐만 아니라 PostgreSQL을 기반으로 하며, RESTful API를 통해 DB와 상호작용할 수 있는 기능을 제공하고 있어 Supabase를 사용하기로 결정하였다.

사용방법

회원가입 후 로그인을 진행한다.
(Use Supabase with Next.js를 참고하여 진행)

New Project 생성

• 프로젝트 이름, 비밀번호, 지역을 설정해준다.

Database 생성

• Table Editor 또는 SQL Editor를 사용해 데이터베이스를 생성해준다.

// SQL Editor에서 생성 방법 예시
 -- Create the table
 create table test (
   id serial primary key,
   title text
 );

 -- Insert some sample data
 insert into test (title)
 values
   ('Today I created a Supabase project.'),
   ('I added some data and queried it from Next.js.'),
   ('It was awesome!');

Table Editor로 new Table 생성

SQL Editor로 new value 추가하기

결과

Next.js 프로젝트와 연결 테스트

.env.local 수정

.env.example 파일을 .env.local로 변경해주고 <> 부분을 자기걸로 수정해주면 된다.

NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

app/test/page.tsx 생성

import { createClient } from "@/utils/supabase/server";

export default async function Test() {
  const supabase = createClient();
  const { data: test } = await supabase.from("test").select();

  return <pre>{JSON.stringify(test, null, 2)}</pre>;
}

확인

npm run dev를 실행하고 /test 위치로 이동하면 DB에 담긴 값들을 확인할 수 있다.

만약 빈 배열이 반환되는 경우 접근 방식 설정이 안돼 발생하는 문제일 수 있다.
Supabase에서 Authentication>Polices에서 Create policy를 진행하여 원하는 접근 방식을 설정해주면 된다.

나의 경우 데이터베이스의 데이터가 잘 나타나는지 확인만 하기 위해 SELECT 템플릿을 사용해 정책을 새로 만들어주었다.