트러블슈팅 1. supabaseClient 호출
- supabase general client 설정
-> 서버 컴포넌트, 클라이언트 컴포넌트 구분없이 어디서든 편안하게 사용할 수 있는 client 설정
// supabaseClient.ts
import { createClient as createServerClient } from "@/supabase/server";
import { createClient as createBrowserClient } from "@/supabase/client";
export const supabase =
typeof window === undefined ? createServerClient() : createBrowserClient();- 로그인 페이지 : 서버 컴포넌트
- 로그인 버튼 컴포넌트 : 클라이언트 컴포넌트
LoginButtons.tsx 에서 supabase 를 supabaseClient.ts 에서 호출했더니, 500 error 발생
❗서버 컴포넌트인 LoginPage에서 클라이언트 컴포넌트인 LoginButtons를 포함하고 있기 때문에, supabaseClient.ts에서 서버와 클라이언트를 구분할 때 문제가 생기고 있었다.
-> LoginPage가 서버 컴포넌트로 정의되어 있기 때문에, 그 안에 있는 모든 코드가 기본적으로 서버 환경에서 실행된다. 서버 컴포넌트 내부에서 클라이언트 컴포넌트를 포함하면, Next.js는 클라이언트 컴포넌트만 클라이언트 환경에서 렌더링하지만, 이 과정에서 supabaseClient.ts가 서버 환경을 기준으로 판단하여 서버 클라이언트(createServerClient)를 반환했던것!
-> 결국, LoginButtons.tsx 는 클라이언트 컴포넌트이므로 /supabase/client 에서 import 해왔음
-> 🤔 이렇게 되면 결국 supabaseClient.ts 파일이 의미가 있나??
gpt 한테 물어보니..
공유 코드: 동일한 코드가 여러 곳에서 클라이언트를 생성할 때, 이를 하나의 파일로 추상화하면 중복을 줄일 수 있다.
유연성: 환경에 따라 동적으로 클라이언트를 선택해야 하는 상황이 발생할 때 supabaseClient.ts가 유용할 수 있다.
트러블슈팅 2. middleware 충돌
next-intl 미들웨어와 updateSession 함수가 충돌.
원인1 : 두 개의 미들웨어 함수가 독립적으로 동작
-> createMiddleware와 updateSession을 각각 독립적인 미들웨어로 설정했다.
하지만 Next.js는 하나의 요청에 대해 하나의 미들웨어만 작동하도록 되어 있음
즉, next-intl 미들웨어와 updateSession이 순차적으로 동작하도록 설정하지 않으면, next-intl 미들웨어가 실행되지 않아 로케일 정보를 찾지 못하게 된다.
원인2 : updateSession 함수가 next-intl 미들웨어보다 먼저 실행
-> 현재 코드는 updateSession 함수가 먼저 실행될 수 있다. 이렇게 되면 next-intl의 로케일 처리가 끝나기 전에 세션 업데이트 로직이 실행되면서 충돌이 발생함
해결 : 미들웨어 로직을 통합하여, next-intl 미들웨어가 먼저 실행되고 그 후에 updateSession 함수가 실행되도록 변경함
