[velog 2022-06-28] NextJS _middleware 사용하기

안녕하세요.

NextJS 버전12에서 서버사이드 미들웨어(베타)가 추가되었습니다.
저는 미들웨어가 추가되었다는 NextJS 패치 Blog를 보고 곧 바로 교체 구현할 수 있는 기능 하나가 떠올랐습니다.
기존에 userAgent에서 익스플로러가 감지되면 엣지브라우저로 강제 리다이렉트 시키는 기능을 _document에서 구현하였는데요.
이 기능을 미들웨어에서 구현하면 좋다고 생각되었습니다.

_middleware.ts 생성

_app.tsx, _document.tsx와 같이 page/_middleware.ts 파일생성 해주시면 됩니다.

_middleware.ts 소스 코드

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

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  const { ua } = req.ua;
  if (ua.match(/MSIE|Internet Explorer|Trident/i)) {
    return NextResponse.redirect('microsoft-edge:' + 'https://www.iwedding.co.kr/main/index');
  }
}

userAgent 정규식을 통해 익스플로러 여부를 파악하고 리다이렉트 시키는 기능이다.

마무리

NextJS에서 여전히 활발히 버전을 업데이트하고 있다. 좋은 기능들이 생기고 있고
새로운 기능으로 기존에 사용하던 코드들을 더욱 깔끔히 정리할 수 있다.
앞으로 미들웨어가 필요한 기능들은 적극 사용할 계획이다.