Next.js Middleware로 요청 처리 최적화하기

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하여 고성능 웹 애플리케이션을 개발할 수 있게 합니다. 이 문서에서는 Next.js의 미들웨어를 사용해 요청 처리를 최적화하는 방법에 대해 설명합니다.

미들웨어란 무엇인가?

미들웨어는 응용 프로그램의 요청-응답 주기 동안 특정한 작업을 수행하는 함수입니다. 미들웨어는 요청이 서버로 전달되기 전, 또는 응답이 클라이언트로 반송되기 전에 실행될 수 있습니다. 이를 통해 요청을 분석, 조작, 검증하거나 로깅, 인증, 권한 부여와 같은 작업을 수행할 수 있습니다.

Next.js에서 미들웨어는 pages/_middleware.js 파일을 통해 설정됩니다. 이 파일은 모든 요청에 대해 실행되는 글로벌 미들웨어를 정의할 수 있습니다.

미들웨어 설정하기

Next.js에서 미들웨어를 설정하는 기본적인 방법을 살펴보겠습니다. 먼저 pages 디렉토리 내에 _middleware.js 파일을 생성합니다. 그 다음으로, 아래와 같은 코드로 시작할 수 있습니다:

javascript
import { NextResponse } from 'next/server';

export function middleware(request) {
  // 미들웨어 로직
  return NextResponse.next();
}

개별 페이지에 적용할 미들웨어를 설정하려면 파일명을 해당 페이지 이름으로 변경하면 됩니다. 예를 들어, pages/about.js에 대한 미들웨어는 pages/about/_middleware.js로 설정하면 됩니다.

미들웨어의 활용 사례

미들웨어는 다양한 상황에서 사용할 수 있습니다. 우선 몇 가지 대표적인 활용 사례를 소개합니다.

요청 로깅

요청에 대한 정보를 로깅하는 것은 디버깅 및 분석에 매우 유용합니다. 아래 예시는 각 요청의 URL을 콘솔에 로깅하는 미들웨어입니다:

javascript
export function middleware(request) {
  console.log(`Incoming request to: ${request.url}`);
  return NextResponse.next();
}

사용자 인증

사용자 인증은 웹 애플리케이션의 중요한 부분입니다. 특정한 페이지나 API에 접근하기 전에 사용자가 인증되었는지 확인할 수 있습니다:

javascript
import { NextResponse } from 'next/server';

export function middleware(request) {
  const { cookies } = request;
  const token = cookies.get('token');

  if (!token) {
    return NextResponse.redirect('/login');
  }

  return NextResponse.next();
}

ACL(Access Control List) 적용

특정 사용자만 특정 페이지에 접근할 수 있도록 하는 ACL(Access Control List)도 미들웨어로 간단히 적용할 수 있습니다:

javascript
import { NextResponse } from 'next/server';

const allowedRoles = ['admin', 'editor'];

export function middleware(request) {
  const { cookies } = request;
  const userRole = cookies.get('role');

  if (!allowedRoles.includes(userRole)) {
    return NextResponse.redirect('/not-authorized');
  }

  return NextResponse.next();
}

성능 최적화를 위한 미들웨어

미들웨어를 통해 성능을 최적화할 수 있는 다양한 방법이 존재합니다. 예를 들어, 캐싱을 통해 자주 요청되는 데이터를 빠르게 응답할 수 있게 합니다.

캐싱

Next.js의 미들웨어를 이용하여 간단한 캐싱 로직을 구현할 수 있습니다. 예를 들어, 특정 API 응답을 캐시할 수 있습니다:

javascript
import { NextResponse } from 'next/server';

const cache = new Map();

export function middleware(request) {
  const { url } = request;
  if (cache.has(url)) {
    return cache.get(url);
  }

  const response = NextResponse.next();
  response.then(res => cache.set(url, res));
  return response;
}

압축

요청 데이터를 압축하여 전송하면 전송 시간을 줄일 수 있습니다. Gzip 또는 Brotli와 같은 압축 알고리즘을 미들웨어에서 사용할 수 있습니다:

javascript
import { NextResponse } from 'next/server';
import zlib from 'zlib';

export function middleware(request) {
  const response = NextResponse.next();
  response.body = zlib.gzipSync(response.body);
  response.headers.set('Content-Encoding', 'gzip');
  return response;
}

결론

Next.js 미들웨어는 요청 처리 로직을 보다 효율적으로 구현하는 도구입니다. 다양한 활용 사례를 통해 성능을 최적화하고, 코드의 중복을 줄이며, 유지 보수를 간편하게 할 수 있습니다. 미들웨어를 적절히 활용하여 더욱 빠르고 안전한 웹 애플리케이션을 개발해 보세요.