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 함수는 실제 토큰의 유효성을 체크하는 로직을 구현해야 합니다.
| 조건 | 설명 |
|---|---|
| 토큰 없음 | 사용자가 로그인하지 않은 경우 |
| 유효하지 않은 토큰 | 사용자가 로그아웃했거나 토큰이 만료된 경우 |
사용자 경험 향상
Next.js의 Middleware를 활용하면 사용자 경험을 크게 향상시킬 수 있습니다. 로그인하지 않은 사용자에게 로그인 페이지로 리다이렉트할 때, 500 에러 페이지가 잠깐 나타나는 상황을 방지할 수 있기 때문입니다.
이를 통해 사용자는 불필요한 오류 페이지를 보지 않고 원활한 경험을 할 수 있습니다.에러 처리 및 사용자 피드백
미들웨어를 통해 리다이렉트 로직을 구현하면, 사용자에게 에러 화면이 노출되지 않도록 할 수 있습니다. 이는 특히 중요한 기능이며, 사용자에게 친절한 피드백을 제공하는 데 중요한 역할을 합니다.
예를 들어, 사용자가 비밀번호를 잘못 입력했을 때는 로그인 페이지로 돌아가면서 오류 메시지를 띄울 수 있습니다.| 에러 유형 | 사용자 피드백 방법 |
|---|---|
| 로그인 실패 | "아이디 또는 비밀번호가 올바르지 않습니다." |
| 토큰 만료 | "로그인 세션이 만료되었습니다." |
이와 같은 피드백을 통해 사용자는 문제를 인지하고 해결할 수 있는 기회를 얻게 됩니다. 미들웨어를 통해 이러한 로직을 중앙에서 처리하면 코드의 중복을 줄이고, 유지보수를 쉽게 할 수 있습니다.
결론
Next.js 14의 Middleware는 웹 애플리케이션에서 로그인 페이지 리다이렉션을 설정하는 데 매우 유용한 도구입니다. 로그인 여부를 확인하고, 사용자가 인증되지 않은 경우에 적절한 페이지로 리다이렉트함으로써 사용자 경험을 개선할 수 있습니다.
이 기능은 특히 보안이 중요한 애플리케이션에서 필수적입니다. 미들웨어를 사용하여 요청을 간편하게 처리할 수 있으며, 이를 통해 코드의 중복성을 줄이고 유지보수를 용이하게 할 수 있습니다.Next.js의 Middleware는 강력한 기능을 제공하므로, 앞으로도 더욱 많은 활용 사례를 기대할 수 있습니다.
