루트 디렉토리에 providers 디렉토리를 만들고 그 안에다가, SupabaseProvider를 만든다.

Supabase Provider를 만들고 모든 컴포넌트에서 접근 할 수 있도록 만들어줌.

'use client';

import { ReactNode, useState } from 'react';

// next.13 버전에서 사용
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { SessionContextProvider } from '@supabase/auth-helpers-react';

import { Database } from '@/types_db';

interface SupabaseProviderProps {
  children: ReactNode;
}

function SupabaseProvider({ children }: SupabaseProviderProps) {
  const [supabaseClient] = useState(() =>
    createClientComponentClient<Database>()
  );

  return (
    <SessionContextProvider supabaseClient={supabaseClient}>
      {children}
    </SessionContextProvider>
  );
}

export default SupabaseProvider;

Layout에서 감싸서 사용가능

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en'>
      <body className={font.className}>
        <SupabaseProvider>
          <SideBar>{children}</SideBar>
        </SupabaseProvider>
      </body>
    </html>
  );
}