Next.js(13.4.0) 모든 페이지에서 토큰 유/무 판단하기

모든 페이지에서 토큰의 유/무를 판단하기 위해서는 _app.js 파일에서 처리할 수 있습니다. 이 파일은 Next.js 애플리케이션의 최상위 컴포넌트로서 모든 페이지 요청 시 호출됩니다. Custom App (_app.js 혹은 _app.tsx)에서 페이지 전환 시마다 로직을 수행할 수 있으므로, 이 곳에서 인증 확인 로직을 넣으면 됩니다. 다음은 샘플 코드입니다: ```jsx import { useEffect } from 'react'; import { useRouter } from 'next/router'; export default function MyApp({ Component, pageProps }) { const router = useRouter(); useEffect(() => { // fetch your cookie or token here const token = fetchTokenOrCookie(); if (!token) { router.push('/signin'); } }, [router]); return <Component {...pageProps} />; } ``` 일반적으로 클라이언트-사이드 인증 체크에는 useEffect를 사용하고, 서버-사이드 auth-check에는 getInitialProps 혹은 getServerSideProps를 사용합니다. 유의해야 할 점은, 위 예제와 같은 클라이언트 사이드 검증 방식을 사용하면 OAuth 플로우가 깨지거나 SEO 문제가 발생할 수 있다는 것입니다. 덧붙여서 _app 에서 getInitialProps 를 사용하면 자동 Static Optimization 이 꺼지게 되니 성능상 주의가 필요합니다.