[next js] 리다이렉트 시 깜빡임 문제 > 미들웨어 적용하여 페이지별 접근 제어하기

<원하던 동작>

인증된 사용자가 아닐 경우, 특정페이지에 접근하지 못하도록 막고 login 페이지로 리다이렉트 시켜줌.

  useEffect(() => {
    if (!user && router.pathname !== "/" && router.pathname !== "/join") {
      console.log(router.pathname);
      router.push("/login");
    }
  }, [isLoginState]);

<문제>

Client에서 직접 router를 통해 redirect를 할 경우, 페이지가 깜빡임
(실제로 해당 페이지에 한번 접근해서 잠깐 보여졌다가 곧바로 redirect 되는 동작)
예를 들어, /mypage에 접근할 경우 해당페이지의 컴포넌트가 잠시 깜빡거리며 보였다가 login페이지로 이동되는 현상이 생김.

<해결>

미들웨어는 특정 요청과 응답사이에 놓아지는 모듈역할을 한다.
Server 환경의 미들웨어를 이용해서 위 문제 없이 곧바로 redirect 할 수 있음

미들웨어는 서버자원이라 로컬스토리지, 세션스토리지에 접근 못하지만 쿠키에는 접근 가능하다.
로그인이 완료되면 쿠키에 토큰 값을 저장해주는 부분을 추가했다.

matcher에 해당하는 것만 미들웨어가 적용 시킴으로써 접근 제어할 페이지를 정할 수 있다.
미들웨어에서는 토큰값을 기반으로하여 matcher와 매치되는 페이지로 이동을 할 경우, login페이지로 redirect 한다.

이렇게되면 미들웨어에서 먼저 가로채어 처리함으로써 /mypage에 접근조차 하지 않게되어 깜빡임이 사라지게 된다.

import { PATH } from "@hocs/withGetServerSideProps";
import { NextRequest, NextResponse } from "next/server";

export default function commonMiddleware(req: NextRequest) {
  const token = req.cookies.get("userToken");

  if (!token) {
    return NextResponse.redirect(new URL("/login", req.nextUrl));
  }
}

export const config = {
  matcher: ["/diary", "/stamp", "/planner", "/mypage"],
};