Next.js의 미들웨어란 무엇입니까?-JS 튜토리얼-php.cn

What is middleware in Next.js

Next.js 미들웨어는 애플리케이션 내 요청 처리를 위한 강력한 사용자 정의 기능을 제공합니다. 세션 유효성 검사, 로깅, 캐싱과 같은 작업을 수행하기 위해 요청을 가로챌 수 있습니다. 그러나 비효율적인 미들웨어 구현은 성능에 심각한 영향을 미칠 수 있습니다. 이 가이드는 미들웨어 기능과 모범 사례를 명확히 설명하여 미들웨어를 효과적으로 활용하는 시기와 방법을 이해하는 데 도움을 줍니다.

Next.js 미들웨어란 무엇인가요?

Next.js 미들웨어는 들어오는 각 요청에 대해 자동으로 실행되는 기능으로 구성됩니다. 이러한 함수는 요청 데이터가 애플리케이션의 라우팅 시스템에 도달하기 전에 검사하고 수정합니다. 애플리케이션에는 인증, 로깅 및 오류 관리가 포함됩니다. 예를 들어 미들웨어는 토큰을 확인하여 사용자 세션을 검증하고 무단 액세스를 방지할 수 있습니다.

Next.js 미들웨어는 유연성이 뛰어나고 사용자 정의가 가능합니다. 특정 애플리케이션 요구 사항을 충족하는 맞춤형 기능을 생성하고 애플리케이션 전체 설정이나 정책을 설정할 수 있습니다. 이는 라우팅 구성을 단순화하고 복잡한 다층 설정을 방지합니다. 미들웨어를 사용하면 더욱 강력하고 확장 가능하며 유지 관리 가능한 애플리케이션이 만들어집니다.

Next.js 미들웨어 처리 순서

요청을 받을 때 작업 순서를 이해하는 것이 중요합니다.

헤더: next.config.js 헤더가 먼저 적용되어 초기 요청 헤더를 설정합니다. 이는 CSP(콘텐츠 보안 정책) 또는 CORS와 같은 보안 헤더에 이상적입니다.
리디렉션: next.config.js 리디렉션은 다음으로 처리되어 요청을 다른 URL에 매핑합니다. 이는 URL 재작성 및 리디렉션을 처리하고 페이지 또는 전체 애플리케이션에 대한 라우팅 규칙을 관리합니다.
미들웨어 평가: 헤더 및 리디렉션 후에 미들웨어가 평가되고 해당 로직이 실행됩니다.
beforeFiles: next.config.js beforeFiles(재작성)이 적용되어 라우팅 전에 추가 재작성 또는 파일별 로직이 가능합니다.
파일 시스템 경로: 애플리케이션의 파일 시스템 경로가 처리됩니다(예: public/, _next/static/, 페이지 및 앱). 정적 파일이 여기에 제공됩니다.
afterFiles: next.config.js afterFiles(재작성)이 적용되어 동적 라우팅 이전에 최종 수정 지점을 제공합니다.
동적 경로: 동적 경로(예: /blog/[slug])가 처리됩니다. 이를 위해서는 변수 또는 매개변수에 대한 특정 처리 및 재작성이 필요합니다.
대체: next.config.js 대체가 적용되어 달리 라우팅할 수 없는 요청을 관리합니다. 이는 오류 처리기 또는 대체 경로를 허용합니다.

일반적인 Next.js 미들웨어 사용 사례

인증: 보호된 리소스에 액세스하기 전에 사용자 자격 증명을 확인하세요. 미들웨어는 세션 토큰을 확인하여 인증되지 않은 사용자를 로그인으로 리디렉션할 수 있습니다. 점원은 이 접근 방식을 효과적으로 사용합니다.
로깅: 분석 및 디버깅을 위해 각 요청을 중앙 서버에 기록하여 애플리케이션 이벤트(사용자 작업, 오류)를 추적합니다.
데이터 가져오기:(제한 있음) 최신 정보를 위해 API 또는 데이터베이스에서 데이터를 로드합니다. 나중에 설명하는 성능 고려 사항에 유의하세요.
요청 라우팅: 라우팅을 사용자 정의하고 요청을 특정 경로로 리디렉션하거나 포괄적인 오류 처리기를 구현합니다.
캐싱: 자주 액세스하는 리소스를 메모리에 저장하고 요청을 줄여 성능을 향상합니다. (원문에 예시코드 제공)
속도 제한: 사용자 또는 IP 주소의 요청을 모니터링하여 과도한 요청을 차단하여 백엔드 리소스를 보호합니다.
페이지 변환: 실시간으로 HTML을 다시 작성하거나 데이터를 변환합니다. 이는 이미지 URL을 다시 작성하거나 다른 도메인의 자산을 제공하는 데 유용합니다.
분석/보고: 최적화를 위해 사용자 행동과 애플리케이션 성능을 추적합니다. 미들웨어는 타사 분석 통합을 위해 쿠키를 수정할 수 있습니다.
국제화: 사용자 지역에 따라 여러 언어로 콘텐츠를 제공합니다(예: IP 주소 또는 HTTP 헤더 사용).

Next.js 프로젝트에서 미들웨어 사용

미들웨어는 프로젝트 루트에 middleware.ts 파일을 생성하여 구현됩니다. 이 파일은 미들웨어 기능과 (선택적으로) 일치자를 정의합니다.

미들웨어 기능

미들웨어 기능에는 미들웨어 로직이 포함되어 있습니다. request을 입력으로 사용하고 response을 반환합니다.

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}</code>

로그인 후 복사

/dashboard로 시작하지 않는 한 요청을 /api으로 리디렉션하는 예:

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

로그인 후 복사

함수는 NextResponse.next(), NextResponse.redirect(), NextResponse.rewrite(), NextResponse.json() 또는 사용자 정의 Response/NextResponse을 반환해야 합니다.

매처

매처는 미들웨어가 어떤 요청을 처리할지 결정합니다. 이는 config 객체:

에 정의되어 있습니다.

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

로그인 후 복사

여러 경로에 배열을 사용하거나 더 복잡한 일치를 위해 정규식을 사용할 수 있습니다.

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}</code>

로그인 후 복사

매처가 없으면 미들웨어가 모든 경로에 적용되어 잠재적으로 성능에 영향을 미칠 수 있습니다.

여러 미들웨어 기능 결합

Next.js는 미들웨어 파일을 하나만 지원합니다. 여러 함수를 사용하려면 별도의 함수를 생성하고 순차적으로 호출하여 생성된 경우 응답을 반환합니다.

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

로그인 후 복사

Clerk 및 Next.js 미들웨어

서기는 다음을 제공하여 인증을 단순화합니다. clerkMiddleware:

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

로그인 후 복사

쿠키 분석 및 사용자 확인을 처리합니다. 사용자 지정 논리로 확장할 수 있습니다.

<code class="language-javascript">export const config = {
  matcher: ['/hello', '/world', '/[a-zA-Z]+/'], // Matches multiple routes and regex
}</code>

로그인 후 복사

Next.js 미들웨어의 한계

Edge 런타임 제약 조건: 미들웨어는 Edge 런타임에서 실행되므로 사용 가능한 API 및 라이브러리가 제한됩니다. 파일시스템 접근이 허용되지 않습니다.
크기 제한: 미들웨어 기능은 1MB로 제한됩니다.
ES 모듈만: ES 모듈만 지원됩니다.
문자열 평가 없음: eval 및 new Function(evalString)은 허용되지 않습니다.
성능 고려 사항: 복잡한 미들웨어는 성능에 부정적인 영향을 미칠 수 있습니다. 미들웨어 내 데이터베이스 액세스는 일반적으로 권장되지 않습니다.
요청/응답에 대한 제한된 액세스: 미들웨어는 요청 및 응답 개체에 대한 전체 액세스 권한이 없습니다.