[Next.js] middleware를 활용한 Redirection

JISEUNG·2023년 5월 21일

middleware.ts next.js

Next.js

목록 보기

3/5

Next.js에서 제공하는 middleware를 사용하면 경로에 접근하기 전에 요청에 따른 Redirection 등을 손쉽게 수행할 수 있다.

middleware.ts

프로젝트의 루트 경로에 middleware.ts 파일을 생성한다.
- /pages , /app 과 같은 수준
이름과 경로 규칙을 정확하게 준수해야 함에 유의하자

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export async function middleware(request: NextRequest) {
  return NextResponse.redirect(
      new URL("/login", request.url)
    );
}

// matcher에 매칭되는 경로로 접근하는 경우, middleware 실행
export const config = {
	// 배열(string[]) 혹은 단일 경로(string)가 가능하다.
  matcher: "/my/:path*"
};

모든 경로에 대해 이 middleware 함수가 호출된다.
경로 필터링에는 두 가지 방법이 있다.
- 위처럼 config의 matcher를 통해 특정 경로에서 middleware가 실행되도록 하기
- 혹은 middleware 함수에서 조건문을 살펴 return 해주기

로그인 여부에 따른 Redirection 구현하기

Next.js의 middleware는 요청 헤더의 쿠키에도 접근할 수 있다. 이 점을 활용해서 로그인 여부에 따른 Redirection을 다음과 같이 구현해보자

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export async function middleware(request: NextRequest) {
	// 요청 헤더에서 로그인 여부를 확인할 수 있도록 쿠키에 접근
  const jwt = request.cookies.get(process.env.NEXT_PUBLIC_AUTH_TOKEN);
	
	// 로그인 상태가 아니면 Redirection
  if (!jwt) {
    return NextResponse.redirect(
      new URL(
        `/login?callbackUrl=${encodeURIComponent(request.url)}`,
        request.url
      )
    );
  }
	
	// 로그인 상태면 원래 요청한 경로로 이동한다.
  return NextResponse.next();
}

// 
export const config = {
  matcher: ["/my-profile", "/my/:path*"]
};