[Next14] To Do List 만들기 with Supabase (1) 프로젝트 세팅

요즘에 Next를 사용하는 회사가 많아짐에 따라 어떤 것인지 궁금해졌어요.

 

Next는 SSR이라서

SEO에 유리하고, 렌더링 속도가 빠릅니다.

특히 API도 직접 만들 수 있다는 것이 흥미로웠어요!

 

실무에서 과연 Next API를 사용할 일이 있을까?라는 생각이 들었지만,

사이드 프로젝트로는 아주 적합하다는 생각이 들었어요!

혼자 개발할 때 서버도 만들고 클라이언트도 만들려면 아주 귀찮기 때문..

 

그래서 새로운 기술을 접할 때 시도해 보기 좋은(만만한)

To Do List를 만들어보려고 합니다!

 

Next API도 사용해볼 예정인데, 그러면 또 database가 필요하겠죠.

database를 직접 구축하는 것은 귀찮아서

supabase라는 서비스를 사용하기로 했습니다. 

 

UI도 예쁘고 사용법도 쉬워서 사이드프로젝트할 때 요긴하게 사용하고 있습니다. 👍🏻

 

Next14 프로젝트 생성하기

우선 Next14 프로젝트 먼저 생성해봅시다. 

 

1. 프로젝트 생성

터미널을 열어서 아래의 커맨드를 실행해주세요.

$ npx create-next-app@latest

커맨드를 실행하면 여러 가지 옵션을 물어보는데요,

취향에 맞게 세팅을 해주시면 됩니다. 

저는 모두 기본 옵션을 선택했어요!

 

2. 프로젝트 실행

프로젝트가 성공적으로 생성되었으니 이제 실행시켜 봅시다!

package.json을 살펴보니

실행을 위한 스크립트는 `yarn dev` 또는 `npm run dev` 를 입력하면 되겠군요. 

---

아까의 터미널에서 아래의 커맨드를 입력해서 next를 실행해 봅시다!

$ cd {프로젝트명}
$ npm run dev

이런, 에러가 발생했군요.

Next를 사용하기 위해선 Node 버전이 18.17.0 이상이어야 하는데,

저는 16.20.2 버전을 사용하고 있어서 발생한 에러입니다.

 

단순히 컴퓨터의 기본 노드 버전을 업그레이드해도 괜찮지만,

저는 다른 프로젝트 때문에 16 버전을 유지해야 합니다.

---

이런 상황에서는 nvmrc를 사용하여

해당 프로젝트에서만 18.17.0 버전을 사용하도록 할 수 있어요. 

프로젝트의 상위루트에 `. nvmrc`파일을 생성해 주고,

사용하고 싶은 노드버전을 작성합니다.

 

딱 18.17.0을 사용하면 정이 없으니 

글 작성시점 기준 LTS 버전인 20.15.0을 사용해 볼게요!

 

그리고 터미널에서 다음과 같은 커맨드를 실행해 주세요.

// .nvmrc 파일에 선언한 노드 버전 설치
$ nvm install

// .nvmrc 파일에 선언한 노드 버전 사용
$ nvm use

---

이제 진짜 Next를 실행시켜 봅시다!

$ npm run dev

`localhost:3000`에 들어가 보면

Next가 성공적으로 실행된 것을 확인할 수 있습니다! 🎉

 

---

supabase 프로젝트 생성하기

이번에는 supabase 프로젝트를 생성해 봅시다.

 

supabase 사이트에 들어가서

아래의 순서대로 프로젝트를 생성해 주세요.

 

1. Start your project 클릭

2. New project 버튼 클릭

3. 프로젝트 설정 후 Create new project 클릭

Supabase에 데이터 추가하기

지금은 아무것도 없는 빈 데이터베이스니까,

테스트를 위해 임시로 데이터를 몇 개 넣어봅시다!

 

1. 사이드 메뉴 Table Editor 클릭

2. New table 버튼 클릭

3. 테이블 설정

테이블 이름은 todos로 설정했습니다.

 

column은 다음과 같이 정했어요.

이름	설명	타입	기본값	빈 값 허용 여부
id	고유 id (primary)	int8	자동생성	X
createdAt	생성한 날짜	timestamptz	now()	X
contents	할 일 내용	text	-	X
isDone	완료 여부	bool	false	X

 

4. save 버튼 클릭

테이블 생성이 완료되었습니다!

이제 임시 데이터를 넣어볼까요?

 

5. Insert 버튼 클릭

6. Insert row 버튼 클릭

7. 내용 기입

8. Save 클릭

데이터 추가도 완료되었습니다! 🎉

 

---

Next14에 Supabase 연결하기

이제 Supabase에서 추가한 데이터를 Next에서 불러와봅시다!

그러기 위해선 우선 두 프로젝트를 연결시켜야겠죠?

 

1. Supabase의 사이드 메뉴의 Project Settings 클릭

2. CONFIGURATION > API 탭 클릭

3. Project URL 영역의 URL 복사 & Project API keys 영역의 service_role 복사

4. Next 프로젝트 최상단에 `.env`파일 생성

5. supabase에서 복사한 내용을 붙여 넣기

6. Next 프로젝트에서 `@supabase/ssr` 설치

$ npm install @supabase/ssr @supabase/supabase-js

7. Next 프로젝트에서 `src/utils/supabase` 하위에 `client.ts`와 `server.ts`파일 생성 후 아래의 코드 붙여 넣기

// src/utils/supabase/client.ts

import { createBrowserClient } from '@supabase/ssr'

// client component에서 supabase에 접근할 때 사용
export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

// src/utils/supabase/server.ts

import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { cookies } from "next/headers";

// server component에서 supabase에 접근할 때 사용
export function createClient() {
  const cookieStore = cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            );
          } catch {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  );
}

 

8. `src/app/todos/pages.tsx` 파일 생성

9. 아래의 코드 붙여 넣기

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

export default async function Todos() {
  // 1. supabase client를 불러와서
  const supabase = createClient();
  
  // 2. todos 테이블의 값을 호출한다.
  const { data: notes } = await supabase.from("todos").select();

  // 3. 호출한 값을 화면에 보여준다.
  return <pre>{JSON.stringify(notes, null, 2)}</pre>;
}

 

10. 결과 확인하기

`localhost:3000/todos` 에 진입하면 다음과 같은 화면을 확인할 수 있어요! 

앞서 추가해 주었던 "블로그 포스팅 완료하기" 데이터가 성공적으로 불러와졌습니다! 🎉

---

지금까지 next와 supabase 프로젝트를 생성하고

두 프로젝트를 연결하여 통신하는 것까지 구현해 보았습니다.

 

하지만 아직 부족합니다.

지금처럼 단순한 텍스트의 나열이 아닌,

직접 할 일을 생성하고, 버튼을 클릭하여 완료처리를 할 수 있는

투두리스트 UI가 필요합니다!

 

다음 글에서 UI를 조금 더 채워봅시다!