Next.js 기반 구성 요소를 조건부로 렌더링: 요청이 인증된 Firebase 사용자로부터 오는지 여부를 어떻게 확인하나요?

Question

참고: 저는 Next.js 13과 app/ 디렉토리를 사용하고 있습니다.

<시간 />

저는 Firebase와 Next.js를 배우고 있으며 장난감 문제를 해결하는 방법을 이해하려고 노력하고 있습니다. 다음과 같은 Home()Component

/app/page.jsx

기본 함수 내보내기 Home() {
  반품 (
    <메인>
      <h1>Hello World</h1>
      <p>인증된 사용자만 이 텍스트를 볼 수 있습니다</p>
    </메인>
  )
}

내 목표는 페이지를 요청하는 사용자가 로그인한 사용자인지 여부에 따라

...

의 모든 내용을 조건부로 렌더링하는 것입니다. Firebase는 JWT, Next.js 13을 사용하여 이 구성요소 서버측을 렌더링하므로 이것이 가능하다고 생각하지만 어떻게 해야 할지 모르겠습니다.

onAuthStateChanged에 대해 알고 있지만 제가 아는 한 이는 클라이언트 측에서만 사용할 수 있습니다. (숙련된 사용자는 이 보호된 콘텐츠를 계속 볼 수 있습니다.) 이 콘텐츠를 서버 측 보호하려면 어떻게 해야 합니까?

Answer 1

사용자가 로그인했는지 확인하려면 'onAuthStateChanged' 메소드를 사용할 수 있습니다.

이 정보를 구성 요소의 상태에 저장하거나 이를 사용하여 구성 요소의 일부를 조건부로 렌더링합니다.

으아악

서버 측에서 사용자 인증을 수행하기 위해 Next.js는 사용자의 인증 상태를 가져오는 'getServerSideProps'를 제공합니다

으아악

---

업데이트된 솔루션:

서버측 경로 생성

으아악

클라이언트 코드

으아악