Next.js 14 Middleware로 로그인 페이지 리다이렉션 구현하기
Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 React 기반의 프레임워크로, 최근 업데이트된 버전 14에서는 미들웨어 기능을 통해 보다 유연한 요청 처리와 리다이렉션 기능을 제공하고 있습니다. 본 글에서는 Next.js 14의 미들웨어를 활용하여 로그인 페이지로의 리다이렉션을 구현하는 방법에 대해 상세히 설명하겠습니다.
Next.js 미들웨어란?
Next.js의 미들웨어는 요청이 처리되기 전에 서버에서 실행되는 JavaScript 함수입니다. 이 함수는 요청 객체와 응답 객체에 접근할 수 있으며, 이를 통해 인증, 요청 확인, 응답 변환 및 에러 처리 등을 수행할 수 있습니다.
미들웨어는 페이지가 렌더링되기 전에 실행되기 때문에, 로그인 여부를 확인하고 적절한 페이지로 리다이렉션하는 데 매우 유용합니다.
미들웨어의 작동 원리
미들웨어는 특정 경로에 대해 실행되도록 설정할 수 있으며, 이를 통해 특정 사용자에게 맞춤형 응답을 제공할 수 있습니다. 예를 들어, 사용자가 인증되지 않은 상태로 특정 페이지에 접근하려고 할 때, 미들웨어를 통해 로그인 페이지로 리다이렉션할 수 있습니다.
아래의 표는 미들웨어의 주요 기능을 정리한 것입니다.
| 기능 | 설명 |
|---|---|
| 요청 처리 | 요청이 들어오기 전에 특정 로직을 실행할 수 있습니다. |
| 인증 확인 | 사용자가 인증된 상태인지 확인할 수 있습니다. |
| 리다이렉션 | 조건에 따라 특정 페이지로 사용자를 리다이렉션할 수 있습니다. |
| 에러 처리 | 요청 처리 중 발생하는 에러를 처리할 수 있습니다. |
미들웨어 설정 방법
Next.js에서 미들웨어를 설정하려면, 프로젝트의 최상위 폴더에 middleware.ts 파일을 생성해야 합니다. 이 파일에서 미들웨어 기능을 구현하고, 특정 경로에 대한 접근을 제어할 수 있습니다.
다음은 미들웨어의 기본 구조입니다.
// middleware.ts
import { NextResponse } from 'next/server';
export function middleware(request) {
const token = request.cookies.get('token');
if (!token) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
위의 코드는 요청 헤더의 쿠키에서 token을 확인하고, 이 토큰이 없을 경우 로그인 페이지로 리다이렉션하는 간단한 미들웨어의 예입니다. 이 코드를 통해 사용자가 인증되지 않은 경우, 자동으로 로그인 페이지로 이동하게 됩니다.
특정 경로에 대한 미들웨어 필터링
미들웨어는 모든 경로에 대해 동작하게 설정할 수도 있지만, 특정 경로에 대해서만 적용하고 싶을 경우 matcher를 사용하여 필터링할 수 있습니다. 예를 들어, /mypage 경로에 대해서만 미들웨어를 적용하고 싶다면 다음과 같이 설정할 수 있습니다.
export const config = {
matcher: ['/mypage'],
};
이 설정을 통해 /mypage 경로에 접근할 때만 미들웨어가 실행되어 리다이렉션을 처리하게 됩니다.
| 설정 항목 | 설명 |
|---|---|
| matcher | 미들웨어가 적용될 특정 경로를 설정합니다. |
| response | 미들웨어에서 처리된 결과로 응답을 생성합니다. |
| token | 요청 헤더의 쿠키에서 사용자의 인증 정보를 확인합니다. |
로그인 페이지 리다이렉션 구현
이제 미들웨어를 통해 로그인 페이지로의 리다이렉션을 구현하는 방법을 좀 더 자세히 살펴보겠습니다. 일반적으로 사용자가 인증되지 않은 상태에서 보호된 페이지에 접근할 경우, 로그인 페이지로 리다이렉션하는 것이 필요합니다.
이를 위해 다음과 같은 절차를 따릅니다.
1단계: 로그인 상태 확인
미들웨어에서 요청 객체의 쿠키를 통해 사용자의 로그인 상태를 확인합니다. 아래의 코드는 사용자의 토큰이 있는지 확인하는 방법을 보여줍니다.
const token = request.cookies.get('token');
if (!token) {
return NextResponse.redirect(new URL('/login', request.url));
}
2단계: 리다이렉션 처리
토큰이 없는 경우, 사용자를 로그인 페이지로 리다이렉션합니다. 이때 NextResponse.redirect 함수를 사용하여 해당 URL로 이동할 수 있도록 설정합니다.
3단계: 사용자에게 메시지 전달
리다이렉션과 함께 사용자에게 알림 메시지를 보여주고 싶다면, URL 쿼리 파라미터를 활용하여 메시지를 전달할 수 있습니다. 예를 들어, 다음과 같이 설정할 수 있습니다.
return NextResponse.redirect(new URL(`/login?message=로그인 후 이용 가능한 서비스입니다.`, request.url));
이렇게 하면 로그인 페이지로 이동할 때, URL에 message 파라미터가 포함되어 전달됩니다.
| 단계 | 설명 |
|---|---|
| 상태 확인 | 쿠키에서 토큰을 확인하여 로그인 여부를 판단합니다. |
| 리다이렉션 | 인증되지 않은 사용자를 로그인 페이지로 이동시킵니다. |
| 메시지 전달 | URL 쿼리 파라미터를 통해 사용자에게 메시지를 전달합니다. |
로그인 페이지에서 메시지 표시하기
로그인 페이지에서 URL 쿼리 파라미터로 전달된 메시지를 사용자에게 보여주기 위해 useRouter 훅을 사용할 수 있습니다. 아래의 코드는 로그인 페이지에서 메시지를 표시하는 방법을 보여줍니다.
import { useRouter } from 'next/router';
const LoginPage = () => {
const router = useRouter();
const { message } = router.query;
return (
<div>
{message && <p>{message}</p>}
{/* 로그인 폼 컴포넌트 */}
</div>
);
};
위의 코드에서는 useRouter 훅을 사용하여 URL 쿼리에서 message를 가져와 화면에 표시합니다. 사용자가 로그인 페이지로 이동했을 때, 전달된 메시지가 있다면 이를 사용자에게 보여주는 방식입니다.
| 구성 요소 | 설명 |
|---|---|
| useRouter | Next.js의 라우터 훅을 사용하여 URL 정보를 가져옵니다. |
| 메시지 표시 | URL에서 메시지를 추출하여 사용자에게 보여줍니다. |
| 로그인 폼 | 사용자가 로그인을 진행할 수 있는 폼을 구현합니다. |
결론
Next.js 14의 미들웨어 기능은 로그인 페이지로의 리다이렉션을 간편하게 구현할 수 있는 강력한 도구입니다. 미들웨어를 통해 사용자의 인증 상태를 확인하고, 인증되지 않은 사용자를 적절한 페이지로 리다이렉션함으로써 보안을 강화할 수 있습니다.
본 글에서 소개한 방법을 통해 여러분의 Next.js 애플리케이션에서도 손쉽게 로그인 페이지 리다이렉션을 구현해 보시기 바랍니다.
댓글
댓글 쓰기