Next.js 미들웨어 활용법

1. `middleware.ts`를 사용하는 이유는 무엇일까요?

`middleware.ts`는 Next.js에서 특정 요청을 처리하거나 사용자 요청을 리디렉션하는 데 사용됩니다. 단순히 로그인 여부를 확인하는 것 이상의 역할을 할 수 있습니다. 다음과 같은 경우에 특히 유용합니다:

• 보호된 페이지 접근 제어: 사용자가 보호된 페이지에 접근하기 전에 로그인 상태를 확인하고, 로그인하지 않은 경우 로그인 페이지로 리디렉션하는 기능을 구현할 수 있습니다.
• 사용자 인증 정보 처리: 사용자의 쿠키나 토큰을 확인해, 특정 조건에 따라 사용자를 원하는 페이지로 리디렉션할 수 있습니다.

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

export function middleware(req: NextRequest) {
  const token = req.cookies.get('jwt_token');

  // 토큰이 없으면 로그인 페이지로 리디렉션
  if (!token) {
    return NextResponse.redirect(new URL('/login', req.url));
  }

  // 토큰이 있으면 요청을 계속 진행
  return NextResponse.next();
}

export const config = {
  matcher: ['/protected-page'], // 보호된 페이지 경로 설정
};

위 예제 코드에서는 사용자가 특정 페이지에 접근하려고 할 때, 로그인 토큰을 확인하고, 토큰이 없으면 로그인 페이지로 자동 리디렉션됩니다. 이렇게 사용자의 요청을 처리하는 방식은 보안성을 높이고, 사용자 경험을 향상시키는 중요한 요소입니다.

2. 언제 `middleware.ts`가 필요하지 않을까요?

반면, 모든 프로젝트에서 `middleware.ts`가 필수적인 것은 아닙니다. 경우에 따라서는 굳이 미들웨어를 사용하지 않아도 로그인 인증을 충분히 처리할 수 있습니다.

• 단순한 로그인 인증: 로그인 시 JWT 토큰을 받아 `localStorage`에 저장하거나, HTTP-only 쿠키로 설정해 이후 API 요청에서 이 토큰을 사용하는 방식만으로도 충분한 경우가 있습니다.
• 클라이언트 측 라우팅: React 컴포넌트에서 직접 로그인 여부를 확인하고, 필요한 경우 리디렉션하는 방식으로 구현하는 것이 더 간단할 수 있습니다.

이처럼 `middleware.ts`는 강력한 도구이지만, 사용 목적에 따라 꼭 필요하지 않을 수도 있습니다. 클라이언트 측에서 로그인 상태를 확인하고 간단히 처리하는 방식이 더 적합할 때도 있습니다.

3. 결론: `middleware.ts` 사용의 장단점

`middleware.ts`를 사용하는 것은 웹사이트의 보안성과 사용자 경험을 크게 향상시킬 수 있습니다. 하지만, 프로젝트의 요구 사항에 맞춰 필요한 경우에만 사용하는 것이 좋습니다. 이 방법을 잘 활용하면, 사용자에게 더 나은 경험을 제공할 수 있고, 데이터 보안도 강화할 수 있습니다.

이제, 여러분의 프로젝트에 `middleware.ts`를 도입해보세요. 상황에 따라 적절히 사용하는 방법을 익히면, 더 강력한 웹사이트를 구축하는 데 큰 도움이 될 것입니다.