Next.js는 React 기반의 프레임워크로, 개발자들이 서버 사이드 렌더링(SSR) 및 정적 웹사이트 생성(SSG)을 쉽게 구현할 수 있도록 도와줍니다. 최근에 Next.js 14 버전이 출시되면서 많은 기능이 추가되었고, 그 중 하나가 바로 Middleware입니다.
Middleware를 사용하면 요청(Request)과 응답(Response)을 처리하기 전에 코드를 조작할 수 있어, 로그인 페이지 리다이렉션과 같은 다양한 기능을 쉽게 구현할 수 있습니다. 이번 글에서는 Next.js 14의 Middleware를 활용하여 로그인 페이지 리다이렉션을 설정하는 방법에 대해 알아보겠습니다.
Middleware란 무엇인가?
Middleware는 요청이 서버에 도착하기 전에 실행되는 코드 조각입니다. HTTP 요청에 대한 사전 처리를 수행하거나, 특정 조건에 따라 요청을 수정하거나 리다이렉트할 수 있는 기능을 제공합니다.
Next.js의 Middleware는 사용자가 페이지에 접근할 때마다 실행되며, 이를 통해 인증, 로깅, 데이터 검증 등 다양한 작업을 수행할 수 있습니다. Middleware의 주요 장점은 다음과 같습니다.
| 장점 | 설명 |
|---|---|
| 요청 처리 시간 단축 | 요청이 서버에 도착하기 전에 미리 처리함으로써 응답 시간을 단축할 수 있습니다. |
| 코드 중복 제거 | 여러 페이지에서 동일한 로직을 사용할 수 있어 코드의 중복을 줄일 수 있습니다. |
| 사용자 경험 향상 | 사용자가 인증되지 않은 경우, 에러 페이지 대신 적절한 페이지로 리다이렉트 할 수 있습니다. |
Middleware를 사용하면 이러한 장점을 통해 사용자 경험을 향상시킬 수 있습니다. 특히 로그인 여부를 체크하고, 로그인하지 않은 사용자에게 로그인 페이지로 리다이렉트하는 기능은 많은 웹 애플리케이션에서 필수적입니다.
Next.js 14 Middleware 설치 및 설정
Next.js 14에서 Middleware를 사용하기 위해서는 몇 가지 설정이 필요합니다. 우선, 프로젝트의 루트 디렉토리에 middleware.ts 파일을 생성해야 합니다.
이 파일은 미들웨어의 핵심 역할을 하며, 요청에 대한 처리를 정의합니다.
미들웨어 파일 작성
아래는 기본적인 미들웨어 파일의 예시입니다.
“`typescript
import { NextResponse } from ‘next/server’;
import type { NextRequest } from ‘next/server’;
export function middleware(request: NextRequest) {
const token = request.cookies.get(‘token’);
// 토큰이 없으면 로그인 페이지로 리다이렉트
if (!token) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
“`
위의 코드에서 NextRequest 객체를 통해 요청 헤더의 쿠키에 접근하고, 토큰이 없으면 로그인 페이지로 리다이렉트합니다. 이 미들웨어는 모든 요청에 대해 실행되므로, 특정 경로에 대해서만 실행하고 싶다면 matcher를 사용할 수 있습니다.
matcher 설정
matcher는 미들웨어가 실행될 경로를 정의하는 방법입니다. 예를 들어, /auth 경로 하위의 모든 요청에 대해서만 미들웨어를 적용하고 싶다면, middleware.ts 파일 상단에 아래와 같이 설정할 수 있습니다.
typescript
export const config = {
matcher: ['/auth/:path*'],
};
이렇게 설정하면 /auth 하위의 모든 경로에 대해 미들웨어가 실행되며, 다른 경로에서는 무시됩니다.
| 설정 항목 | 설명 |
|---|---|
| matcher | 미들웨어가 적용될 경로를 설정합니다. |
| NextRequest | 요청 객체로, 요청에 대한 정보와 관련된 메소드를 제공합니다. |
| NextResponse | 응답 객체로, 리다이렉트나 응답을 수정할 수 있습니다. |
로그인 페이지 리다이렉션 구현하기
이제 미들웨어가 설정되었으니, 사용자가 로그인하지 않은 경우 로그인 페이지로 리다이렉트하는 로직을 구현해 보겠습니다. 이 기능은 특히 보안이 중요한 웹 애플리케이션에서 매우 유용합니다.
토큰 검증 및 리다이렉션
로그인 여부를 판단하기 위해, 사용자의 쿠키에 저장된 토큰을 검증합니다. 토큰이 없거나 유효하지 않은 경우, 로그인 페이지로 리다이렉트합니다.
아래는 이 과정을 설명하는 코드입니다.
“`typescript
import { NextResponse } from ‘next/server’;
import type { NextRequest } from ‘next/server’;
export function middleware(request: NextRequest) {
const token = request.cookies.get(‘token’);
// 유효하지 않은 토큰일 경우 로그인 페이지로 리다이렉트
if (!token || !isValidToken(token)) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
// 토큰 유효성 검사 함수 (예시)
function isValidToken(token: string): boolean {
// 실제 유효성 검사 로직 구현
return token === ‘valid-token-example’; // 예시로 단순화
}
“`
이 코드는 사용자가 로그인한 상태인지 확인하고, 로그인하지 않은 경우에만 로그인 페이지로 리다이렉트합니다. isValidToken 함수는 실제 토큰의 유효성을 체크하는 로직을 구현해야 합니다.
이 함수는 JWT를 사용하여 토큰을 검증할 수도 있습니다.
| 조건 | 설명 |
|---|---|
| 토큰 없음 | 사용자가 로그인하지 않은 경우 |
| 유효하지 않은 토큰 | 사용자가 로그아웃했거나 토큰이 만료된 경우 |
사용자 경험 향상
Next.js의 Middleware를 활용하면 사용자 경험을 크게 향상시킬 수 있습니다. 로그인하지 않은 사용자에게 로그인 페이지로 리다이렉트할 때, 500 에러 페이지가 잠깐 나타나는 상황을 방지할 수 있기 때문입니다.
이를 통해 사용자는 불필요한 오류 페이지를 보지 않고 원활한 경험을 할 수 있습니다.
에러 처리 및 사용자 피드백
미들웨어를 통해 리다이렉트 로직을 구현하면, 사용자에게 에러 화면이 노출되지 않도록 할 수 있습니다. 이는 특히 중요한 기능이며, 사용자에게 친절한 피드백을 제공하는 데 중요한 역할을 합니다.
예를 들어, 사용자가 비밀번호를 잘못 입력했을 때는 로그인 페이지로 돌아가면서 오류 메시지를 띄울 수 있습니다.
| 에러 유형 | 사용자 피드백 방법 |
|---|---|
| 로그인 실패 | “아이디 또는 비밀번호가 올바르지 않습니다.” |
| 토큰 만료 | “로그인 세션이 만료되었습니다.” |
이와 같은 피드백을 통해 사용자는 문제를 인지하고 해결할 수 있는 기회를 얻게 됩니다. 미들웨어를 통해 이러한 로직을 중앙에서 처리하면 코드의 중복을 줄이고, 유지보수를 쉽게 할 수 있습니다.
결론
Next.js 14의 Middleware는 웹 애플리케이션에서 로그인 페이지 리다이렉션을 설정하는 데 매우 유용한 도구입니다. 로그인 여부를 확인하고, 사용자가 인증되지 않은 경우에 적절한 페이지로 리다이렉트함으로써 사용자 경험을 개선할 수 있습니다.
이 기능은 특히 보안이 중요한 애플리케이션에서 필수적입니다. 미들웨어를 사용하여 요청을 간편하게 처리할 수 있으며, 이를 통해 코드의 중복성을 줄이고 유지보수를 용이하게 할 수 있습니다.
Next.js의 Middleware는 강력한 기능을 제공하므로, 앞으로도 더욱 많은 활용 사례를 기대할 수 있습니다.
