본문 바로가기

Next.js

[Next.js] Middleware

미들웨어가 효율적으로 작동하는 예시

인증 및 권한 부여: 특정 페이지 또는 API 경로에 대한 액세스 권한을 부여하기 전에 사용자 신원을 확인하고 세션 쿠키를 확인
서버 측 리디렉션: 특정 조건(예: 로캘, 사용자 역할)에 따라 서버 수준에서 사용자를 리디렉션
경로 재작성: 요청 속성에 따라 API 또는 페이지에 대한 경로를 동적으로 다시 작성하여 A/B 테스트, 기능 롤아웃 또는 레거시 경로를 지원
봇 탐지: 봇 트래픽을 감지하고 차단하여 리소스를 보호
로깅 및 분석: 페이지 또는 API에서 처리하기 전에 요청 데이터를 캡처하고 분석하여 인사이트를 얻음
기능 플래깅: 원활한 기능 출시 또는 테스트를 위해 동적으로 기능을 활성화 또는 비활성화

 

미들웨어 사용을 권장하지 않는 경우

복잡한 데이터 가져오기 및 조작

무거운 계산 작업

광범위한 세션 관리

직접 데이터베이스 작업

 

미들웨어의 적용: root 수준에서 middleware.js or ts

하나의 프로젝트에서 하나의 미들웨어만 지원한다.

미들웨어는 모든 라우터가 거쳐가 실행되기 때문에 특정 경로만 해당할 수 있게 설정하기 위해서는 matcher를 사용해야 한다.

 

matcher

미들웨어를 특정한 경로에서 실행되게 할 수 있다.

특정 경로만 제외하는 경우(negative lookahead)도 지원한다.

missing, has 배열로 미들웨어를 우회할 수 있다.

matcher는 상수여야 하며, 변수처럼 변화될 수 있는 값은 무시된다.

header을 생성할 수 있다.

 

matcher의 형식

- /about/:path => /about/a (o) /about/b(o) about/a/b(x)

- /about/:path* => /about/a (o) /about/b(o) about/a/b(o)

- /about/:path? => /about (o) /about/a(o) about/a/b(x)

- /about/:path+ => /about (x) /about/a(o) about/a/b(o)

 

Cookie

쿠키는 일반적인 header다. request에서 Cookie에, response에서 Set-Cookie에 있다.

쿠키를 다루는 명령어는 get, getAll, set, delete 등이 있다.

수신요청시(incoming request) has로 존재 여부를, clear로 모든 쿠키를 삭제할 수 있다.

 

waitUntil() 방법

promise를 객체로 받아 미들웨어의 수명을 promise를 얻을 때까지 늘린다.

백그라운드에서 작업을 수행할 때 유용하다.

 

skipTrailingSlashRedirect는 후행 슬래시를 추가하거나 제거하기 위한 Next.js 리디렉션을 비활성화합니다. 이렇게 하면 미들웨어 내부에서 사용자 정의 처리를 통해 일부 경로에는 후행 슬래시를 유지하지만 다른 경로에는 유지하지 않도록 할 수 있으므로 증분 마이그레이션이 더 쉬워집니다.

 

skipMiddlewareUrlNormalize를 사용하면 Next.js에서 URL 정규화를 비활성화하여 직접 방문과 클라이언트 전환을 동일하게 처리할 수 있습니다. 일부 고급의 경우 이 옵션은 원본 URL을 사용하여 완전한 제어를 제공합니다.

'Next.js' 카테고리의 다른 글

[Next.js] Server Components  (0) 2024.06.18
[Next.js] Fetching, Caching, Revalidating  (0) 2024.05.23
[Next.js] Intercepting Routes  (0) 2024.05.22
[Next.js] Parallel Routes  (0) 2024.05.22
[Nest.js] Dynamic Routes  (0) 2024.05.22