middleware 적용

이번 포스트에서는 Next.js에서 middleware를 적용하는 방법을 알아본다.

 

1. 기본 사용

next.js 프로젝트의 root에 middleware.ts 파일을 생성한다.

// middleware.ts

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

export const middleware = async (request: NextRequest) => {
	console.log("middleware 입니다")
};

 

2. matcher

특정 경로에서만 실행되게끔 필터링해주는 옵션이다.

export const config = {
	matcher: '/test/:path*'
}

배열을 통해 단일 경로 또는 여러 경로를 필터링 가능하다.

export const config = {
	matcher: ['/test/:path*', '/main/:path*']
}

 

3. 조건문

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/test')) {
    return NextResponse.rewrite(new URL('/test2', request.url))
  }

  if (request.nextUrl.pathname.includes('/main')) {
    return NextResponse.rewrite(new URL('/main/about', request.url))
  }
}

 

4. 접속 제한

- Bot 제한

request.ua(user agent) 내부에 isBot이 담겨 있으며, boolean 표현되어, 접근대상이 봇이면 차단 가능하다.

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

export function middleware(request: NextRequest, event: NextFetchEvent) {
  if (req.ua?.isBot) {
    return new Response("bot 감지", { status: 403 });
  }
}

- 쿠키에 따른 제한

이 방법을 이용해 비로그인 유저를 제한이 가능하고, 다양한 조건들을 추가할 수 있다.

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

export function middleware(request: NextRequest, event: NextFetchEvent) {
  if (!request.url.includes("/signin") && !request.cookies.auth) {
    return NextResponse.rewrite(new URL("/signin", request.url));
  }
}

 

---

개인적인 느낌으로 Next.js에서 middleware를 적용시키는 방법은 편리했으나, 사용가능한 폭이 좀 적다는 생각이 들었다.

url, 쿠키, 헤더에 관한 컨트롤은 편리하지만, middleware 내에서 data fetching이 안되기 때문에 back-end 통신과 관련된 조건을 추가하기에는 무리가 있었다.

따라서, 본인은 middleware를 쿠키와 url 접속에 대한 조건식 추가하는 정도로만 이용했다.