1. Next.js와 Nest.js 소개

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성을 지원합니다. 이로 인해 SEO 최적화 및 빠른 페이지 로딩 속도를 구현할 수 있습니다. 반면, Nest.js는 TypeScript 기반의 백엔드 프레임워크로, 모듈화 및 테스트 용이성을 중시하는 구조를 가지고 있습니다. 이 두 프레임워크의 결합은 강력한 풀스택 개발 환경을 만들어냅니다.

2. Nest.js API 생성하기

Nest.js를 사용하여 RESTful API를 생성하는 과정은 다음과 같습니다.

2.1 Nest.js 설치

우선 Nest.js를 설치합니다. 터미널에서 다음 명령어를 실행합니다:
npm i -g @nestjs/cli
그 후 새로운 프로젝트를 생성합니다:
nest new project-name

2.2 컨트롤러 및 서비스 생성

API의 기본 구성 요소로서 컨트롤러와 서비스를 생성합니다. 예를 들어, 사용자 데이터를 가져오는 API를 추가합니다. 터미널에서 다음 명령어를 실행합니다:
nest generate controller users
nest generate service users

2.3 비즈니스 로직 구현

users.service.ts 파일에서 간단한 메모리 기반의 사용자 데이터를 추가합니다:

class UsersService {
    private users = [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Doe' },
    ];

    findAll() {
        return this.users;
    }
}
                

2.4 API Route 설정

users.controller.ts 파일을 수정하여 GET 요청을 처리합니다:

@Controller('users')
export class UsersController {
    constructor(private readonly usersService: UsersService) {}

    @Get()
    findAll() {
        return this.usersService.findAll();
    }
}
                

2.5 Nest.js 서버 실행

모든 설정이 완료되면 Nest.js 서버를 실행합니다:
npm run start
이로써 API 서버가 http://localhost:3000/users에서 실행됩니다.

3. Next.js에서 API 호출하기

이제 Next.js를 사용하여 Nest.js에서 만든 API로부터 데이터를 가져오는 과정을 설명합니다.

3.1 Next.js 설치

새로운 Next.js 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행합니다:
npx create-next-app client

3.2 API 호출 구현

Next.js의 페이지 인터페이스에서 Nest.js API를 호출합니다. pages/index.js 파일을 수정하여 데이터를 가져옵니다:

import { useEffect, useState } from 'react';

export default function Home() {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        fetch('http://localhost:3000/users')
            .then(response => response.json())
            .then(data => setUsers(data));
    }, []);

    return (
        

            
사용자 목록
            

                {users.map(user => (
                    
{user.name}
                ))}
            
        
    );
}
                

3.3 CORS 설정

Nest.js와 Next.js가 서로 다른 포트를 사용하기 때문에 CORS 설정이 필요합니다. main.ts 파일을 수정하여 CORS를 허용합니다:

async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    app.enableCors();
    await app.listen(3000);
}
                

4. 데이터 통신 구조 이해하기

Next.js와 Nest.js 간의 데이터 통신 구조는 클라이언트-서버 아키텍처에 기반합니다. 클라이언트는 사용자 요청을 생성하고, 서버는 요청을 처리하여 응답을 반환합니다. 이 과정에서 API 요청 시 발생하는 데이터를 어떻게 관리할지에 대한 고민이 필요합니다.

4.1 상태 관리

Next.js에서 데이터의 상태 관리에는 React의 상태 관리 훅을 사용할 수 있으며, 이외에도 Redux나 Zustand와 같은 외부 상태 관리 라이브러리를 활용할 수 있습니다.

4.2 응답 구조 설계

API의 응답 구조도 고려해야 합니다. 예를 들어, 클라이언트에서 데이터를 구분하기 쉽도록 응답 시 각 데이터에 대한 메타 정보를 포함시켜 구현할 수 있습니다.

5. 결론

Next.js와 Nest.js의 조합은 현대 웹 애플리케이션 개발에 매우 강력한 도구입니다. 두 프레임워크를 통합하면 SEO 최적화 및 모듈화된 코드 베이스를 유지하면서도 효율적인 데이터 통신 구조를 설계할 수 있습니다. 이 글을 통해 기본적인 데이터 가져오기와 API 통신 구조에 대한 이해를 돕고자 했습니다. 지속적인 학습을 통해 보다 깊이 있는 통합 개발을 경험하시길 바랍니다.