20.Nest.js와 Next.js에서 Middleware와 Guard 사용하기, Next.js에서 API 요청 시 미들웨어 적용하기

현대 웹 애플리케이션은 성능과 보안을 우선시하며, 이를 달성하기 위해 다양한 기술 스택과 구조를 사용합니다. 특히 Nest.js와 Next.js는 이러한 요구 사항을 충족시키기 위해 인기 있는 프레임워크입니다. 본 글에서는 Nest.js와 Next.js에서 미들웨어와 가드를 사용하는 방법에 대해 자세히 설명하고, Next.js에서 API 요청 시 미들웨어를 적용하는 과정을 살펴보도록 하겠습니다.

1. Nest.js의 Middleware 이해하기

Nest.js는 Node.js 기반의 프레임워크로, TypeScript로 작성된 애플리케이션을 개발하는 데 유용하며, 미들웨어를 통해 요청-응답 사이클을 제어할 수 있습니다. 미들웨어는 프레임워크의 요청과 응답이 처리되는 과정에서 특정 로직을 실행할 수 있도록 해줍니다.

1.1 Middleware의 작동 원리

미들웨어는 주로 다음과 같은 기능을 수행합니다:

  • 요청 데이터의 변환
  • 인증 및 권한 검사
  • 로깅
  • 오류 처리

1.2 Nest.js에서 Middleware 구현하기

Nest.js에서 미들웨어를 구현하기 위한 기본적인 코드 예시는 다음과 같습니다.

import { Injectable, NestMiddleware } from '@nestjs/common';

@Injectable()
export class LoggerMiddleware implements NestMiddleware {
    use(req: Request, res: Response, next: Function) {
        console.log('Request...');
        next();
    }
}

위 코드는 요청이 들어올 때마다 로그를 출력하는 간단한 미들웨어입니다. 이를 애플리케이션에 적용하려면 해당 미들웨어를 모듈에 등록해야 합니다.

1.3 Middleware 등록하기

미들웨어는 app.module.ts 파일 또는 특정 모듈 파일에 등록할 수 있습니다.

import { Module, MiddlewareConsumer } from '@nestjs/common';
import { LoggerMiddleware } from './logger.middleware';

@Module({
    // ...
})
export class AppModule {
    configure(consumer: MiddlewareConsumer) {
        consumer
            .apply(LoggerMiddleware)
            .forRoutes('*'); // 모든 경로에 미들웨어 적용
    }
}

2. Nest.js에서 Guard의 역할

Nest.js의 Guard는 요청을 처리하기 전에 특정 조건을 검사하는 데 사용됩니다. 주로 인증 및 권한 부여와 관련된 로직을 구현하는 데 활용됩니다.

2.1 Guard의 실제 사용 예시

Guard의 예시는 다음과 같이 구현할 수 있습니다.

import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';

@Injectable()
export class AuthGuard implements CanActivate {
    canActivate(context: ExecutionContext): boolean {
        const request = context.switchToHttp().getRequest();
        // 인증 로직 예시
        return request.headers.authorization === 'Bearer YOUR_TOKEN';
    }
}

3. Next.js의 Middleware 소개

Next.js는 React 기반의 서버 사이드 렌더링(SSR) 프레임워크입니다. Next.js에서도 미들웨어를 활용하여 HTTP 요청을 가로채고, 특정 기능을 처리할 수 있습니다.

3.1 Next.js의 Middleware 사용 방법

Next.js의 미들웨어는 기본적으로 파일 시스템 기반의 라우팅을 사용하며, middleware.js 파일을 생성하여 적용할 수 있습니다.

import { NextResponse } from 'next/server';

export function middleware(req) {
    if (!req.headers.get('Authorization')) {
        return NextResponse.redirect(new URL('/api/auth/unauthorized', req.url));
    }
    return NextResponse.next();
}

4. Next.js에서 API 요청 시 미들웨어 적용하기

Next.js에서 API 요청에 미들웨어를 적용하여 인증 및 권한 검사를 수행하는 방법을 구체적으로 알아보겠습니다.

4.1 Next.js API Routes 만들기

우선, API 경로를 생성하여 기본적인 API 엔드포인트를 설정해야 합니다. pages/api 디렉토리 내에 hello.js 파일을 생성합니다.

export default function handler(req, res) {
        res.status(200).json({ message: 'Hello, World!' });
    }

4.2 미들웨어 적용하기

이제 위에서 정의한 미들웨어를 적용하여 요청 시 인증 검사를 수행하도록 합니다.

import { NextResponse } from 'next/server';

export function middleware(req) {
    if (!req.headers.get('Authorization')) {
        return NextResponse.redirect(new URL('/api/auth/unauthorized', req.url));
    }
    return NextResponse.next();
}

4.3 전체 응용 프로그램에 미들웨어 적용하기

Next.js에서 모든 API 요청에 미들웨어를 적용하려면 middleware.js 파일을 프로젝트의 루트에 추가하여 전역 미들웨어로 설정해야 합니다.

5. Nest.js와 Next.js 통합하기

Nest.js와 Next.js를 함께 사용하여 전체 스택 애플리케이션을 구축할 수 있습니다. 이 때, Nest.js는 백엔드로서 API 서버 역할을 수행하고, Next.js는 프론트엔드로써 클라이언트 요청을 처리합니다.

5.1 Nest.js에서 API 및 인증 설정하기

@Controller('api')
export class ApiController {
    @Get('data')
    @UseGuards(AuthGuard)
    getData() {
        return { data: 'Some protected data' };
    }
}

5.2 Next.js에서 API 요청 처리하기

const fetchData = async () => {
        const res = await fetch('/api/data', {
            headers: {
                'Authorization': 'Bearer YOUR_TOKEN'
            }
        });
        if (!res.ok) throw new Error('Failed to fetch data');
        return res.json();
    }

6. 결론

Nest.js와 Next.js의 미들웨어 및 가드는 현대 웹 애플리케이션에서 중요한 요소입니다. 이러한 기능을 적절히 활용하면 성능과 보안을 높일 수 있습니다. 본 강좌를 통해 이들 프레임워크의 기본 개념과 활용 방법에 대해 소개했으며, 실제 코드 예시를 통해 이해를 돕고자 했습니다. 앞으로도 이러한 기술을 활용하여 더욱 강력한 애플리케이션을 개발하시길 바랍니다.

위 글은 Nest.js와 Next.js의 미들웨어 및 가드에 대한 강좌입니다.