Next.js에서 page.js

Next.js의 모든 페이지는 React 컴포넌트입니다. 이들 컴포넌트는 서버 사이드 렌더링, 정적 생성, 클라이언트 사이드 렌더링 등의 다양한 데이터 가져오기 전략을 지원합니다. 하지만 질문으로부터 언급하신것 처럼 일반적인 React 컴포넌트나 페이지를 async 함수로 선언하는 것은 권장되지 않습니다. 왜냐하면 React 컴포넌트는 동기식으로 실행되며, 비동기적인 로직은 useEffect 훅 내에서 처리해야하기 때문입니다. 로그인 상태를 확인하려면 Next.js의 getServerSideProps 또는 getInitialProps와 같은 데이터 가져오기 메소드를 사용하는 것이 좋습니다. 이런 함수들은 서버측에서 실행되어 초기 페이지 로딩 시 필요한 데이터를 가져옵니다. 아래 예제와 같이 사용할 수 있습니다: ```js export async function getServerSideProps(context) { const session = await getSession(context); return { props: { session } } } export default function Home({ session }) { if (!session) { return <LoginComponent /> } return <MainPageComponent /> } ``` 위 코드로 수정하면 Home() 자체에 async를 붙일 필요가 없으며, getServerSideProps 안에서 세션 확인 후 로그인 상태에 따라 해당 컴포넌트를 반환하게 됩니다.