[Next.js] Middleware에 대해 알아보자

Middleware란?

• 통용적으로 사용되는 의미로는 "서로 다른 애플리케이션이 서로 통신하는 데 사용되는 소프트웨어" 이다.
• 미들웨어를 통해 더욱 빠르게 혁신할 수 있도록 애플리케이션을 지능적이고 효율적으로 연결하는 기능을 제공한다.
• 미들웨어는 단일 시스템에서의 다양한 기술,도구, DB간에 다리 역할을 한다.
• 유저는 이 같은 서비스에 대해 인식하지 못한다.

개발자는 처음에 미들웨어를 사용하여 초기 코드를 다시 쓰지 않고도 새 프로그램을 초기 시스템과 통합하였습니다. 미들웨어는 분산 시스템의 중요한 통신 및 데이터 관리 도구가 되었습니다. 개발자는 미들웨어를 사용하여 애플리케이션 개발을 지원하고 디자인 프로세스를 단순화합니다. 이렇게 하면 서로 다른 소프트웨어 구성 요소 사이를 연결하지 않고 자유롭게 비즈니스 로직 및 기능에 중점을 둘 수 있습니다. 미들웨어가 없으면 개발자는 애플리케이션에 연결된 각 소프트웨어 구성 요소의 데이터 교환 모듈을 구축해야 합니다. 이 구축 작업은 상당히 어렵습니다. 현대적 애플리케이션은 여러 마이크로서비스 또는 서로 통신하는 작은 소프트웨어 구성 요소로 구성되기 때문입니다.

 

Next.js middleware (공식 문서 링크)

• Node.js는 server 파일이 따로 있기 때문에 그 안에 사용할려는 미들웨어를 정리할 수 있음.
• 하지만 Next.js는 Serverless가 베이스이기 때문에 그 점을 보완하기 하기 위해 middleware 기능을 따로 구현
• 전체 로직: user가 요청한 req가 있음. 이것을 back에 보내기 전 log와 controller 함수가 존재.
• 이 함수들을 통해 종착지 DB에 도달하기 전 특정 action을 취할 수 있음. ( 조건 부합하지 않는 유저를 걸러낸다던지)

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

export default function middleware(req: NextRequest, ev: NextFetchEvent) {
    console.log("it's global");
}

• 전역적으로 중간 과정을 거치게 하고 싶다면 root 파일 바로 아래에 middleware.ts(or js)를 생성 후 위와 같이 작성
• 특정 지역에서만 중간 과정을 거치가 하고 싶다면 같은 페이지 레벨의 src 디렉터리에 작성하면됨.

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

export default function middleware(req: NextRequest, ev: NextFetchEvent) {
    console.log(userAgent(req));
}


/**
interface UserAgent {
    isBot: boolean;
    ua: string;
    browser: {
        name?: string;
        version?: string;
    };
    device: {
        model?: string;
        type?: string;
        vendor?: string;
    };
    engine: {
        name?: string;
        version?: string;
    };
    os: {
        name?: string;
        version?: string;
    };
    cpu: {
        architecture?: string;
    };
}
*/

userAgent를 이용하면 유저의 브라우저와 디바이스 등 정보를 열람할수 있어서
이것을 통해 익스플로어로 접속한 유저는 막기도 가능해짐 (원래 req.ua로 확인했는데 이건 삭제됐다고 함)