미들웨어는 요청이 서버로 도달하기 전에 특정 작업을 수행할 수 있는 기능을 제공하는 코드이다.
Next.js에서 미들웨어는 주로 인증, 권한 확인, 로깅 또는 리다이렉션 같은 작업을 처리하는 데 사용된다.
역할
- 라우트 보호 : 특정 페이지나 API에 접근할 때, 사용자가 인증된 상태인지 미리 확인할 수 있다.
- 리다이렉션 : 사용자가 인증되지 않은 상태에서 보호된 페이지에 접근하려 할 때 로그인 페이지로 리다이렉트하는 등의 작업을 처리할 수 있다.
- 쿠키 관리 : 쿠키에서 세션 정보를 읽고 사용자 상태를 확인하는 작업도 가능하다.
미들웨어 설정
- Next.js 12부터 미들웨어를 지원하며, middleware.ts 파일을 프로젝트의 루트 디렉터리에 생성하여 사용할 수 있다
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(req: NextRequest) {
const token = req.cookies.get('token') // 토큰 또는 세션 쿠키 확인
if (!token) {
return NextResponse.redirect(new URL('/login', req.url)) // 인증되지 않은 사용자를 로그인 페이지로 리다이렉트
}
return NextResponse.next() // 인증된 사용자일 경우 다음으로 진행
}미들웨어에서 할 수 있는 일
- 사용자 인증 확인 : 요청에 따라 사용자 정보를 확인하고 필요한 조치를 취한다.
- API 호출 전 작업 : 데이터를 가공하거나 요청을 수정할 수 있다.
- 조건부 페이지 접근 제한 : 권한이 없는 사용자는 특정 페이지에 접근하지 못하게 할 수 있다.
인증과 미들웨어를 함께 사용하는 경우
- Next.js에서 미들웨어를 통해 인증을 확인하고, 인증 상태에 따라 보호된 페이지나 API에 접근할 수 있게 할 수 있다. 예를 들어, 미들웨어에서 사용자가 인증되지 않은 경우 로그인 페이지로 리다이렉트하고, 인증된 경우 요청을 계속 진행하게 하는 방식이다.
굿