인증이 필요한 페이지 (/vote/**, /members/**) 에 대한 접근 제어를 클라이언트가 아닌 서버 사이드에서 처리하기 위해 Next.js proxy를 활용했습니다.

클라이언트 사이드에서만 접근을 제어할 경우, JavaScript가 실행되기 전 잠깐 페이지가 노출되거나 직접 URL을 입력해 우회하는 것이 가능합니다. Proxy는 요청이 페이지에 도달하기 전 서버에서 먼저 실행되기 때문에 이런 우회를 원천 차단할 수 있습니다.

구성

export function proxy(request: NextRequest) {
  const token = request.cookies.get("accessToken")?.value;

  if (!token) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/vote/:path*", "/members/:path*"],
};

• matcher : Proxy를 실행할 경로를 지정합니다. 매칭된 경로의 요청에만 인증 검사가 적용됩니다.
• 쿠키에서 accessToken을 확인해 없으면 홈(/)으로 리다이렉트, 있으면 요청을 그대로 통과시킵니다.

쿠키 저장을 Server Action으로 처리한 이유

이 방식이 동작하려면 로그인 시 AccessToken을 인메모리뿐 아니라 쿠키에도 함께 저장해야 합니다.

클라이언트에서 document.cookie로 직접 저장하면 Secure, HttpOnly, SameSite 같은 보안 속성을 설정할 수 없습니다. Next.js의 cookies() API를 사용하는 Server Action은 서버에서 Set-Cookie 헤더로 쿠키를 내려주기 때문에 보안 속성을 명시적으로 제어할 수 있고, SSR·Proxy 환경에서 Next.js가 권장하는 공식 방식입니다.

로그인 성공
├── setAccessToken(token)   → 인메모리 변수 (클라이언트 API 요청용)
└── setAuthCookie(token)    → Server Action → HttpOnly 쿠키 (Proxy 인증용)