Middleware의 개요
Middleware는 요청(request)과 응답(response) 간의 흐름을 조작할 수 있는 코드입니다. Next.js에서 Middleware를 사용하면, 사용자가 특정 URL에 접근할 때 미리 정의된 로직을 실행할 수 있습니다.
예를 들어, 인증되지 않은 사용자가 로그인 페이지에 접근하려고 할 때, 해당 요청을 가로채어 로그인 페이지로 리다이렉션할 수 있습니다. 이러한 리다이렉션을 통해 사용자 경험을 개선하고, 오류 페이지가 노출되는 것을 방지할 수 있습니다.Middleware의 동작 원리
Middleware는 요청이 처리되기 전에 실행됩니다. 요청이 들어오면, Middleware가 해당 요청을 가로채고, 필요한 경우 이를 수정하거나 다른 URL로 리다이렉션합니다.
이 과정은 다음과 같은 흐름으로 진행됩니다.- 사용자 요청이 들어오면 Middleware가 실행됩니다.
- Middleware는 요청의 URL, 헤더, 쿠키 등을 분석합니다.
- 필요에 따라 요청을 수정하거나 다른 페이지로 리다이렉션합니다.
- 최종적으로 응답이 클라이언트에게 전달됩니다.
Middleware의 이점
Middleware를 사용하면 다음과 같은 장점이 있습니다.
- 코드 재사용성: 공통적으로 필요한 로직을 Middleware로 묶어 여러 페이지에서 재사용할 수 있습니다.
- 유지보수 용이성: 인증, 권한 관리 등과 같은 복잡한 로직을 한 곳에서 관리할 수 있어 유지보수가 쉬워집니다.
- 사용자 경험 개선: 오류 페이지 노출을 최소화하고 부드러운 리다이렉션을 통해 사용자 경험을 향상시킬 수 있습니다.
| 장점 | 설명 |
|---|---|
| 코드 재사용성 | 공통 로직을 Middleware로 묶어 재사용 가능 |
| 유지보수 용이성 | 복잡한 로직을 한 곳에서 관리하여 유지보수 용이 |
| 사용자 경험 개선 | 오류 페이지 노출 최소화 및 부드러운 리다이렉션 제공 |
로그인 페이지 리다이렉션 구현
이제 본격적으로 Next.js 14의 Middleware를 이용하여 로그인 페이지로의 리다이렉션을 구현해 보겠습니다. 이 작업은 사용자의 인증 상태를 확인하고, 인증되지 않은 사용자가 보호된 페이지에 접근할 경우 로그인 페이지로 리다이렉트하는 방식으로 진행됩니다.
프로젝트 구조 설정
Next.js 프로젝트의 기본 구조는 /pages 또는 /app 디렉토리 아래에 위치합니다. 이 구조에 맞춰 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 객체를 통해 요청의 쿠키를 확인합니다. 만약 쿠키에 'token'이 없다면, 사용자는 인증되지 않은 것으로 간주하고 로그인 페이지로 리다이렉트합니다.
Middleware 설정
Middleware의 작동 범위를 지정하기 위해 middleware.ts 파일에 matcher를 설정할 수 있습니다. matcher를 사용하면 특정 경로에 대해서만 Middleware가 작동하도록 필터링할 수 있습니다.
/protected 경로 아래의 모든 페이지에 대해 Middleware를 적용하고 싶다면, 다음과 같이 설정할 수 있습니다.
typescript
export const config = {
matcher: ['/protected/:path*'], // /protected 경로에만 적용
};
이렇게 설정하면 /protected 경로 하위의 모든 페이지에 대해 Middleware가 적용되어, 사용자가 인증되지 않은 상태로 접근할 경우 로그인 페이지로 리다이렉트됩니다.
| 설정 항목 | 설명 |
|---|---|
| matcher | Middleware가 적용될 경로를 설정 |
| NextRequest | 요청 정보를 담고 있는 객체 |
| NextResponse | 응답 정보를 담고 있는 객체 |
사용자 경험 개선
이러한 리다이렉션 로직을 구현함으로써, 사용자는 유효하지 않은 접근을 시도할 때 500 내부 서버 오류와 같은 불필요한 오류 페이지를 보지 않게 됩니다. 대신, 로그인 페이지로 부드럽게 리다이렉트되어 사용자 경험이 개선됩니다.
이로 인해 사용자는 보다 직관적이고 원활한 탐색을 경험하게 됩니다.결론
Next.js 14에서 제공하는 Middleware 기능은 로그인 페이지 리다이렉션을 구현하는 데 매우 유용합니다. 이를 통해 인증 및 권한 관리를 간편하게 수행할 수 있으며, 사용자 경험을 개선할 수 있습니다.
Middleware를 활용하면 코드의 재사용성과 유지보수성을 높일 수 있으며, 다양한 요청 처리 로직을 구현할 수 있습니다. Next.js의 Middleware는 앞으로의 프로젝트에서 매우 유용하게 사용될 수 있으며, 다양한 기능을 활용하여 더욱 효율적인 웹 애플리케이션을 구축할 수 있습니다.이 글을 통해 Middleware의 개념과 로그인 리다이렉션 구현 방법을 이해하시길 바랍니다.
