[Next.js] Middleware로 잘못된 경로 접근 시 redirect하기

제목에서 알 수 있듯이 이번 포스팅은 post id가 숫자로 이루어져야하는데 숫자 아닌 경우 post 목록으로 redirect하는 것처럼 특정 조건을 만족하는 path에서 redirect하는 방법에 대해 다룰 것이다.

 

미들웨어의 사용 목적은 쉽게 말하면 요청이 완료되기 전에 한 단계를 거쳐갈 수 있도록 하는 것이다. 요청에 따라 response를 rewrite, redirect, modify할 수 있다.

 

메들웨어를 사용하는 사용하는 경우

공식 홈페이지에서 제시한 미들웨어를 사용하는 경우는 아래와 같다.

• 인증, 인가 : user 정보와 세션 쿠키 등을 확인하고 특정 페이지 접근을 막을 수 있다.
• Server-Side Redirects : 서버 단계에서 특정 조건에서 redirect할 수 있다.
• Path rewriting : 요청 속성을 기반으로 동적으로 API route 또는 페이지 경로를 재작성하여 A/B 테스트, 기능 롤아웃 또는 legacy path를 지원할 수 있다.
• Bot Detection : Bot traffice을 감지하거나 막아서 리소스를 보호할 수 있다.
• Loggin and Analytics : 페이지나 API 요청을 완료하기 전에 요청 데이터를 기록하고 분석할 수 있다.
• Feature Flagging : 기능 롤아웃/테스트에서 동적으로 기능을 활성화/비활성화할 수 있다.

코드 예시

//./src/middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// See "Matching Paths" below to learn more
export const config = {
  matcher: '/about/:path*',
}

 

Matching Paths : `matcher`

제목에서 알 수 있듯이 이번 포스팅은 post id가 숫자로 이루어져야하는데 숫자 아닌 경우 post목록으로 redirect하는 것처럼 특정 조건을 만족하는 path에서 실행되고 우회하는 방법에 대해 다룰 것이다.

 

기본적으로 별다른 세팅이 없다면 모든 route에서 미들웨어가 작동한다. `config`의 `matcher`는 특정한 path에서 실행되도록 하는 것이다. 여러 경로에 대해 미들웨어를 실행하고 싶으면 `matcher: ['/about/:path*', '/dashboard/:path*']`처럼 배열로 작성하면 된다. 아래처럼 정규식을 사용해 경로를 추가할 수 있다.

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     */
    '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
  ],
}

 

이때 `matcher`의 작성방법에 대해 알아보자.

• `/`로 시작해야 함 : `post/1`처럼 작성하면 안되고 `/post/1`처럼 작성해야 함.
• named parameter를 포함할 수 있음.
  • `/post/:path` 외에 `/post/:id`, `/post/:number`처럼 다양한 이름을 사용할 수 있음.
  • `/post/:path*` : `/post`를 포함하여 `/post`로 시작하는 다양한 path.
  • `/post/:path?` : `/post`를 포함하여 `/post` 이후에 최대 1개의 segment까지 존재하는 path.
  • `/post/:path+` : '/post` 이후에 최소 1개의 segment를 포함하는 path.

따라서 id가 숫자가 아닌 경우 `/post`로 redirect하려면 아래와 같이 작성하면 된다.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  if (typeof +request.nextUrl.pathname.split("/")[2] !== number) {
    return NextResponse.redirect(new URL("/post", request.url));
  }
}

export const config = {
  matcher: `/post/:id+`
}

 

---

더 자세한 미들웨어 사용방법은 Next.js Docs를 참고하자.

Routing: Middleware | Next.js