캐시로 인한 미들웨어 미호출 및 페이지 전환 오류
위 사진과 같이 로그인을 한 상태에서도 로비 페이지로 이동하지 못하고 로그인 페이지로 접속하게 되는 오류가 발생하였습니다.
운영체제, 브라우저, 의존성 목록 등
- Windows 11
- Chrome
- Next.js v15.0.2
로그인에 성공한 후 로비 페이지로 이동할 수 있어야 하지만, 로비 페이지로 이동하려고 시도하면 자동으로 로그인 페이지로 리다이렉트되는 문제가 발생하였습니다.
다음과 같이 Next.js의 미들웨어 기능을 활용해서 로그인하지 않은 사용자는 로비 페이지로 접속하려고 할 때 로그인 페이지로 리다이렉트하였습니다.
import { NextRequest, NextResponse } from 'next/server';
export function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
const accessToken = request.cookies.get('access_token');
if (pathname === '/signin' && accessToken) {
return NextResponse.redirect(new URL('/', request.url));
}
**if (pathname === '/lobby' && !accessToken) {
return NextResponse.redirect(new URL('/signin', request.url));
}**
if (pathname.startsWith('/game') && !accessToken) {
return NextResponse.redirect(new URL('/signin', request.url));
}
}
export const config = {
matcher: ['/signin', '/lobby', '/game/:roomId*'],
};이는 Next.js의 Middleware가 인증/인가에 활용될 수 있기 때문에 쿠키에 액세스 토큰이 있는지 검증하여 로그인 여부를 판별하였습니다.
하지만 Next.js의 캐시 기능이 방문한 페이지에 대해서 캐시 처리를 하였기 때문에 이전에 방문한 페이지에 대해서 로그인 또는 로그아웃을 해도 접근 가능한 오류가 발생하였습니다.
[Building Your Application: Caching](https://nextjs.org/docs/app/building-your-application/caching)
페이지가 캐시 처리되었기 때문에 당연히 다음 사진과 같이 미들웨어가 호출되지 않았습니다.
캐시를 무효화하기 위해서 다음과 같이 로그인 또는 로그아웃을 통해 메인 페이지로 이동하면 자동으로 새로고침을 진행하여 캐시를 무효화하였습니다.
'use client';
import LottieFile from '@/../public/lottie/video.json';
import Lottie from 'lottie-react';
import * as motion from 'framer-motion/client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
const Introduction = () => {
const router = useRouter();
useEffect(() => {
router.refresh();
}, [router]);
...
}