강의에서 작성한 코드

https://github.com/lopun-lecture/inflearn-supabase-todo-list/commit/1e654998416845c29d4200631239ff733a948db3

https://github.com/lopun-lecture/inflearn-supabase-todo-list/commit/b02a4934fbb6af06a71bdb654331dcfd8b4b730b

<aside> ⚠️ 강의에서 수정이 필요한 부분이 있어 안내를 드립니다. layout.tsx를 작성하실 때 Provider들을 body tag에만 적용하도록 수정 부탁드립니다.

</aside>

라이브러리 추가 설치

npm i --save @supabase/ssr @tanstack/react-query

React Query 설정

config/ReactQueryClientProvider.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export const queryClient = new QueryClient({});

export default function ReactQueryClientProvider({
  children,
}: React.PropsWithChildren) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

app/layout.tsx

import ReactQueryClientProvider from "config/ReactQueryClientProvider";

export default function RootLayout({ children }) {
  return (
    <ReactQueryClientProvider>
    ...
    </ReactQueryClientProvider>
  )
}

Supabase 설정

Build a User Management App with Next.js | Supabase Docs

.env

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_SUPABASE_SERVICE_ROLE=
NEXT_SUPABASE_DB_PASSWORD=