[Nextjs] Next.js Middleware로 인증 및 리디렉션 처리하기

Next.js Middleware는 요청(Request)을 서버에서 처리하기 전에 실행되는 함수로, 인증 및 권한 관리를 포함한 다양한 작업을 수행할 수 있는 강력한 도구입니다. 이 글에서는 Next.js Middleware를 활용해 인증 상태에 따라 페이지 접근을 제어하는 방법을 다뤄보겠습니다.

Middleware란?

Middleware는 HTTP 요청이 특정 페이지로 전달되기 전에 실행됩니다. 그런 다음, 들어오는 요청에 따라 응답을 재작성, 리디렉션, 요청 또는 응답 헤더 수정, 또는 직접 응답할 수 있습니다.

주요 특징

• Edge 실행: Middleware는 Edge Runtime에서 실행되며, 빠르고 서버 리소스를 적게 사용합니다.
• 유연성: 요청을 수정하거나 리다이렉션, 응답을 차단할 수 있습니다.
• 코드 실행: 클라이언트 요청이 서버에 도달하기 전에 코드를 실행할 수 있습니다.

---

인증 상태에 따른 페이지 접근 제어

1. 로그인하지 않은 사용자가 게시물 작성, 채팅, 마이페이지와 같은 페이지에 접근하면 로그인 페이지로 리디렉션
2. 로그인한 사용자가 로그인 또는 회원가입 페이지에 접근하면 마이페이지로 리디렉션

Middleware 작성하기

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export const middleware = (req: NextRequest) => {
  const refreshToken = req.cookies.get('refreshToken');

  if (
    !refreshToken &&
    (req.url.includes('/create') || req.url.includes('/chat') || req.url.includes('/mypage'))
  ) {
    return NextResponse.redirect(new URL('/auth/signIn', req.url));
  }

  if (refreshToken && (req.url.includes('/auth/signIn') || req.url.includes('/auth/signUp'))) {
    return NextResponse.redirect(new URL('/mypage', req.url));
  }

  return NextResponse.next();
};

export const config = {
  matcher: ['/create/:path*', '/chat/:path*', '/mypage/:path*', '/auth/signIn', '/auth/signUp'],
};

Matcher

matcher를 사용하여 특정 경로에서만 Middleware를 실행하도록 필터링 할 수 있습니다.

단일 경로나 여러 경로를 배열 구문으로 매칭할 수 있습니다.

• matcher: '/create/:path*'
• mathcer: ['/create/:path*', '/chat/:path*']

❗️ middleware는 페이지와 동일한 수준(루트 또는 src 디렉터리에)에 위치해야 합니다.

클라이언트 코드 간소화

이제 클라이언트에서 조건부 라우팅을 제거할 수 있습니다.

// 기존 코드 예시
const { isAuthenticated } = useAuthStore();

const handleCreateClick = () => {
    if (isAuthenticated) {
      router.push('/create');
    } else {
      router.push('/auth/signIn');
    }
  };

// 수정 코드 예시
  const handleCreateClick = () => {
    router.push('/create');
  };

이제 router.push는 페이지 이동만 처리하며, 접근 제어는 Middleware에서 수행됩니다.

---

결론

Next.js Middleware는 인증 및 권한 관리를 효율적으로 처리할 수 있는 강력한 도구입니다. 클라이언트와 서버 간 역할을 명확히 분리하여 코드를 간소화하고 보안을 강화할 수 있습니다.

---

✅ 참고

• NEXT.JS_docs
• NextJS: Middleware_hwisaac