Next.js 14 Middleware로 로그인 페이지 리다이렉션 구현하기
Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 모두를 지원하는 강력한 React 프레임워크입니다. 최근에는 Next.js 14 버전이 출시되면서 멋진 기능들이 추가되었습니다.
그 중 하나가 바로 Middleware입니다. Middleware는 요청이 처리되기 전에 중간에서 코드를 실행할 수 있는 기능으로, 인증, 로깅, 데이터 변환 등의 다양한 용도로 활용될 수 있습니다.
이번 글에서는 Next.js 14의 Middleware를 활용하여 로그인 페이지 리다이렉션을 구현하는 방법에 대해 자세히 알아보겠습니다.
Middleware 이해하기
Middleware는 Next.js 애플리케이션의 요청과 응답 사이에서 실행되는 함수입니다. 이 함수는 클라이언트가 페이지를 요청하기 전에 실행되며, 요청을 검사하거나 응답을 수정하는 등 다양한 작업을 수행할 수 있습니다.
Middleware를 사용하면, 특정 조건에 따라 클라이언트를 다른 페이지로 리다이렉트하거나 요청을 차단하는 방식으로 애플리케이션의 흐름을 제어할 수 있습니다.
Middleware의 작동 방식
Middleware는 Next.js의 루트 디렉토리 또는 /pages 또는 /app 디렉토리와 같은 특정 경로에 위치해야 합니다. 이를 통해 Next.js는 해당 파일을 인식하고, 애플리케이션의 모든 페이지 요청에 대해 지정된 미들웨어 함수를 실행할 수 있습니다.
다음은 Middleware가 수행할 수 있는 주요 작업입니다.
| 작업 유형 | 설명 |
|---|---|
| 요청 검사 | 클라이언트의 요청을 검사하여 유효성을 평가합니다. |
| 인증 | 사용자가 로그인했는지 확인하고, 인증되지 않은 사용자는 리다이렉션합니다. |
| 응답 수정 | 서버에서 클라이언트로 보내는 응답을 수정할 수 있습니다. |
| 에러 처리 | 요청 처리 중 발생하는 에러를 잡아내고, 적절한 응답을 반환합니다. |
Middleware는 기본적으로 Next.js의 페이지 렌더링 전에 실행되기 때문에, 사용자 경험을 향상시키는 데 매우 유용합니다. 다음 섹션에서는 로그인 페이지 리다이렉션을 구현하기 위해 Middleware를 어떻게 설정하고 사용할 수 있는지에 대해 자세히 살펴보겠습니다.
Next.js Middleware 설정하기
Next.js에서 Middleware를 설정하는 과정은 비교적 간단합니다. 먼저, 프로젝트의 최상위 디렉토리에 middleware.ts 파일을 생성해야 합니다.
이 파일 내에서 Middleware 함수를 정의하고, 특정 경로에 대해 이를 적용할 수 있습니다.
Middleware 파일 생성
middleware.ts 파일을 생성한 후, 다음과 같이 기본적인 Middleware 함수를 정의할 수 있습니다.
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();
}
위의 코드에서 request.cookies.get('token')을 통해 클라이언트의 쿠키에서 token 값을 가져옵니다. 만약 token이 없다면, 사용자는 로그인하지 않은 상태로 간주되고 로그인 페이지로 리다이렉션됩니다.
반대로, token이 존재한다면 요청을 정상적으로 처리하도록 NextResponse.next()를 반환합니다.
특정 경로에 대한 Middleware 적용
미들웨어를 모든 경로에서 실행하는 대신 특정 경로에 대해서만 적용하고자 한다면, matcher를 활용할 수 있습니다. matcher는 미들웨어가 실행될 경로를 정의하는 역할을 하며, 다음과 같이 설정할 수 있습니다.
export const config = {
matcher: ['/protected/*'], // '/protected/' 하위 경로에만 미들웨어 적용
};
위의 설정은 /protected/ 경로 하위의 모든 페이지 요청에 대해 Middleware가 실행되도록 합니다. 이와 같은 설정을 통해 사용자는 로그인된 경우에만 특정 페이지에 접근할 수 있게 됩니다.
| 미들웨어 설정 방법 | 설명 |
|---|---|
| 전역 적용 | 모든 페이지에 대해 미들웨어가 실행됩니다. |
| 경로 필터링 | 특정 경로에 대해서만 미들웨어를 적용합니다. |
이제 Middleware를 설정하고 특정 경로에 적용하는 방법을 알아보았으니, 다음으로는 로그인 페이지로의 리다이렉션을 구현하는 구체적인 방법을 살펴보겠습니다.
로그인 페이지 리다이렉션 구현하기
로그인 페이지 리다이렉션은 사용자의 인증 상태에 따라 결정됩니다. 사용자가 로그인하지 않은 경우에는 로그인 페이지로 리다이렉션하고, 로그인한 경우에는 접근하려는 페이지로 안내하는 방식입니다.
쿠키를 통한 인증 확인
Next.js의 Middleware에서는 요청 헤더의 쿠키에 접근할 수 있습니다. 이를 통해 사용자 인증 상태를 확인하는 것이 가능합니다.
예를 들어, 클라이언트가 보낸 쿠키에서 token 값이 있는지를 확인하여 사용자가 로그인했는지를 판단합니다. 사용자의 로그인 여부에 따라 적절한 리다이렉션을 구현하기 위해 다음과 같은 로직을 추가할 수 있습니다.
export function middleware(request) {
const token = request.cookies.get('token');
if (!token && request.nextUrl.pathname !== '/login') {
// 로그인하지 않은 사용자이므로 로그인 페이지로 리다이렉션
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
위의 코드에서는 사용자가 로그인 페이지가 아닌 다른 페이지에 접근할 경우에만 로그인 페이지로 리다이렉션되도록 설정했습니다. 이렇게 함으로써 사용자는 이미 로그인 페이지에 있는 경우에는 중복 리다이렉션을 방지할 수 있습니다.
사용자 경험 향상하기
리다이렉션이 이루어질 때, 사용자에게 알림 메시지를 표시하는 것도 좋은 방법입니다. 예를 들어, 로그인하지 않은 사용자가 로그인 페이지로 이동할 때 알림 메시지를 표시하여 사용자가 어떤 이유로 이동했는지를 명확히 이해할 수 있도록 할 수 있습니다.
리다이렉션할 때 쿼리 매개변수를 통해 메시지를 전달하고, 로그인 페이지에서 이를 표시하는 방식으로 구현할 수 있습니다.
if (!token && request.nextUrl.pathname !== '/login') {
const url = new URL('/login', request.url);
url.searchParams.set('message', '로그인이 필요합니다.');
return NextResponse.redirect(url);
}
로그인 페이지에서는 다음과 같이 쿼리 매개변수를 읽어와서 메시지를 사용자에게 표시할 수 있습니다.
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
const LoginPage = () => {
const router = useRouter();
const [message, setMessage] = useState('');
useEffect(() => {
if (router.query.message) {
setMessage(router.query.message);
}
}, [router.query]);
return (
<div>
{message && <p>{message}</p>}
{/* 로그인 폼 */}
</div>
);
};
export default LoginPage;
이렇게 하면 사용자는 로그인 페이지에 도착했을 때 필요한 정보를 즉시 확인할 수 있습니다. 사용자 경험을 더욱 개선하기 위해 여러 요소를 고려하여 리다이렉션 로직을 작성할 수 있습니다.
| 리다이렉션 구현 요소 | 설명 |
|---|---|
| 쿠키를 통한 인증 | 쿠키에서 토큰을 확인하여 로그인 여부 판단 |
| 알림 메시지 표시 | 리다이렉션 시 사용자에게 알림 메시지 전달 |
결론
Next.js 14의 Middleware 기능을 활용하면 간편하게 사용자 인증 및 페이지 리다이렉션 로직을 구현할 수 있습니다. Middleware를 통해 요청을 처리하기 전에 사용자 인증 상태를 확인하고, 로그인하지 않은 사용자를 로그인 페이지로 리다이렉트하는 방식은 웹 애플리케이션의 보안과 사용자 경험을 동시에 향상시킬 수 있는 좋은 방법입니다.
이번 글을 통해 Next.js 14의 Middleware를 활용하여 로그인 페이지 리다이렉션을 구현하는 방법을 살펴보았습니다. 다양한 기능과 설정을 활용하여 더욱 풍부한 사용자 경험을 제공하는 웹 애플리케이션을 만들어 보시기 바랍니다.
댓글
댓글 쓰기