넥스트js에서 사용자 인증 페이지 구분

질문자님이 생각하신 대로 app.js에서 인증 페이지를 구분하고 로그인 페이지로 redirect할 수 있지만, 클라이언트 측에서 이를 처리할 경우 인증되지 않은 사용자가 페이지를 방문하면 일시적으로 화면이 표시된 후 페이지가 이동되면서 깜박거리는 현상이 발생할 수 있습니다. Next.js의 middleware을 사용해서 서브 측에서 로그인된 사용자인지를 판단하고 필요한 경우 로그인 페이지로 redirect하는 방법도 좋을 것 같습니다! middleware: https://nextjs.org/docs/pages/building-your-application/routing/middleware 아래는 예시 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// Case 1) middleware에서 Auth Guard 처리
import { NextRequest, NextResponse } from "next/server";

export async function middleware(req: NextRequest) {
  const { nextUrl } = req;
  const token = req.cookies.get("access_token");

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

  return NextResponse.next();
}

// middleware가 실행될 경로
export const config = {
  matcher:  ["/mypage", "/settings", "profiles"],
};

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// Case 2) client 단에서 Auth Guard 처리 (깜빡거리는 현상 발생)
// components/RouteGuard.jsx
export const RouteGuard = ({ children }) => {
  const token = localStorage.getItem("token");
  const router = useRouter();
  const authRoutes = ["/mypage", "/settings", "profiles"];
  
  useEffect(() => {
    if (authRoutes.includes(router.pathname) && !token) {
      router.push("/result");
    }
  }, []);
  return <>{children}</>;
};
// app.jsx
function App({ Component, pageProps }) {
  return (
    <RouteGuard>
      <Component {...pageProps} />;
    </RouteGuard>
  );
}