nextjs middleware 에서 protected route 처리 하는 방법이 궁금합니다

Next.js의 Middleware를 이용해 protected route를 처리하는 방법에 대한 질문에 대해 답변하겠습니다. 먼저, Next.js의 Middleware는 서버가 request-response 사이클에서 특정 코드를 실행하는 방법입니다. 사용자의 요청이 서버에 도착했을 때 예로 인증확인(예:JWT 추가 및 확인) 등을 할 수 있습니다. Indded, you are right. In a full-stack context, tokens often refreshed in middleware and it is a quite common practice to do so. And there is nothing wrong with making an API call for token refresh from your middleware if you may need to make the same checks on every protected page of your application. However, it's important to note that due to the nature of JavaScript executing on the client's browser after the page has rendered server-side, it might cause some unwanted effects such as "flashes" when redirecting unauthenticated users. To solve this issue one approach could be: 1. Create an API route (E.g., /api/refreshToken) which would handle refreshing of tokens. 2. In your middleware, check if the access token is expired. 3. If access token is expired: - Make fetch call from within middleware to /api/refreshToken and get the new access and refresh tokens. - Store new tokens in cookies, - Then redirect user to their intended path using `res.writeHead()` and `res.end()`. 4. Make sure this logic runs before rendering any component on protected routes. 필요한 경우 새로 고침 논리를 제거하고 대신 클라이언트 측에서 JWT 만료를 체크하는 것도 고려해볼 수 있습니다. 그러나 관점에 따라 이것이 "플래시"를 방지하는 가장 좋은 방법은 아닐 수 있습니다. Next.js의 서버측 렌더링(SSR)을 사용하여 로그인 상태를 처리하는 것이 더 나을 수 있습니다. 이 접근법에서는 페이지가 클라이언트에 첫 번째로 전송되기 전에 SSR 메서드 (`getServerSideProps` 또는 `getInitialProps`)에서 토큰 유효성 검사를 수행합니다. 아무튼, 이는 여러 접근법 중 하나일 뿐입니다. 해결책 선택은 지금 구축하고 있는 프로젝트와 해당 프로그램 요구 사항에 따라 달라집니다.