Next.js Middleware에 대해서 설명해주세요.
분야: 프론트엔드
Next.js의 미들웨어는 요청이 완료되기 전에 코드를 실행할 수 있게 해주는 기능입니다. 미들웨어는 middleware.ts 파일로 프로젝트 루트나 src 디렉토리에 위치합니다. 서버 사이드에서 실행되며, 요청이 라우트 핸들러나 페이지에 도달하기 전에 동작합니다.
사용 예시를 들자면, 인증 및 권한 검사나 리다이렉션 처리, 요청/응답 헤더 수정 등 입니다.
Edge Runtime에서 실행되어 매우 빠른 성능을 제공하며, 그렇기에 Node.js API의 일부만 사용 가능합니다.
Edge Runtime이란 무엇인가요? 🤔
Edge Runtime은 서버리스 환경에서 실행되는 경량화된 JavaScript 런타임입니다. CDN의 엣지 노드에서 코드를 실행하여 사용자와 가장 가까운 위치에서 빠른 응답을 제공합니다.
전 세계 여러 지역에 분산된 엣지 서버에서 코드를 실행하기에, 콜드 스타트가 거의 없고 매우 빠른 응답 시간을 가지고 있습니다.
그렇기에 fs나 워커 스레드 같은 기능들은 사용이 불가능하며, fetch나 URL, URLSearchParams 같은 기능들이 사용 가능합니다.
실제로 Middleware를 사용하신 적이 있나요? 🤔
실제 프로젝트에서는 주로 인증 검사와 리다이렉션 로직을 미들웨어로 구현했습니다.
예를 들어, 로그인하지 않은 사용자가 대시보드에 접근하려 할 때 로그인 페이지로 리다이렉트시킴으로써 서버단에서 처리하며 보안성을 높였습니다.