[Nextjs] nextjs middleware활용해서 redirect구현하기

[Nextjs] nextjs middleware활용해서 redirect구현하기 

 

안녕하세요. 이번 포스팅에서는 nextjs 에서 middleware를 활용해서 redirect를 구현하는 방법에 대해 알아보겠습니다.

 

middleware에 작성된 코드는,  request가 완료되기 전에 작동합니다.

이를 활용해, response를 중간에 가로채 수정할 수 있습니다. 

response를 중간에 가로채서 url을 변경해주면 redirect기능을 구현할 수 있겠죠?

자주 사용되는 예시를 통해,  redirect 기능을 구현하는 방법에 대해 알아보겠습니다.  

 

아래 예시코드는 로그인이 되어있지 않은 유저가 페이지에 접근하려고 할 때, root페이지로 redirect를 시키는 코드입니다.

// middleware.ts
import { NextFetchEvent, NextRequest, NextResponse } from 'next/server';

export async function middleware(request: NextRequest, event: NextFetchEvent) {
	if (request.nextUrl.pathname.startsWith('/auth')) {
    		// 쿠키를 통해 로그인 여부를 확인 -> 비로그인 상태일 경우 rootpage로 이동
		if (request.cookies.get('logged') !== 'true') {
			return NextResponse.redirect(new URL('/', request.url));
		}
	}
}