4.Next.js와 Nest.js 기본 프로젝트 구조 만들기, Next.js와 Nest.js 기본 폴더 구조 이해

이번 포스트에서는 Next.js와 Nest.js를 이용하여 기본 프로젝트 구조를 만드는 방법에 대해 자세히 알아보겠습니다. JavaScript와 TypeScript를 사용하는 프레임워크인 이들 두 가지는 웹 개발에서 인기가 높습니다. Next.js는 React 기반의 프레임워크로, 탁월한 SSR(Server-Side Rendering)과 정적 페이지 생성을 지원하며, Nest.js는 Angular에서 영감을 받아 집약된 구조로 웹 애플리케이션을 구축하는 강력한 서버 사이드 프레임워크입니다. 이 두 가지 프레임워크를 결합하여 전체 스택 애플리케이션을 구축할 때 고려해야 할 기본적인 폴더 구조에 대해 알아보겠습니다.

1. 프로젝트 생성

먼저 Next.js와 Nest.js 프로젝트를 생성합니다. 각 프레임워크별로 CLI(Command Line Interface)를 통해 쉽게 프로젝트를 설정할 수 있습니다.

1.1 Next.js 프로젝트 생성

npx create-next-app@latest my-next-app

위의 명령어를 실행하면 my-next-app이라는 이름의 새 Next.js 프로젝트가 생성됩니다. 생성된 폴더로 이동합니다.

cd my-next-app

1.2 Nest.js 프로젝트 생성

npm i -g @nestjs/cli

위의 명령어로 Nest CLI를 설치한 후, 아래와 같이 새로운 Nest.js 프로젝트를 생성합니다.

nest new my-nest-app

생성된 폴더로 이동합니다.

cd my-nest-app

2. 기본 폴더 구조 이해

각 프레임워크의 기본 폴더 구조를 알아보겠습니다. 특정한 폴더 구조는 프로젝트의 유지 관리 및 확장성을 높이는 데 도움이 됩니다.

2.1 Next.js 기본 폴더 구조

Next.js 프로젝트의 기본 구조는 다음과 같습니다:


my-next-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── vercel.svg
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
└── package.json
  • node_modules: 프로젝트에서 사용하는 모든 의존성이 설치되는 디렉토리입니다.
  • public: 정적 파일을 저장하는 곳으로, 예를 들어 이미지나 글꼴을 저장합니다.
  • styles: CSS 파일을 저장하는 폴더로, 각 컴포넌트에 대한 스타일을 정의할 수 있습니다.
  • pages: Next.js의 라우팅을 담당하는 폴더로, api 폴더 안에는 API 라우트가 포함됩니다. 또한 _app.js는 애플리케이션의 레이아웃을 정의하는 데 사용됩니다.
  • package.json: 프로젝트의 메타데이터 및 스크립트, 의존성을 정의하는 파일입니다.

2.2 Nest.js 기본 폴더 구조

Nest.js 프로젝트의 기본 구조는 다음과 같습니다:


my-nest-app/
├── src/
│   ├── app.module.ts
│   ├── app.controller.ts
│   ├── app.service.ts
└── package.json
  • src: 애플리케이션의 소스 코드가 포함되는 폴더입니다. 기본적으로 app.module.ts, app.controller.ts, app.service.ts 파일이 생성됩니다.
  • app.module.ts: 루트 모듈로, 애플리케이션의 구성 요소를 가져오고 종합합니다.
  • app.controller.ts: 클라이언트의 요청을 처리하는 컨트롤러입니다.
  • app.service.ts: 비즈니스 로직을 구현하는 서비스입니다.
  • package.json: 의존성 관리 및 빌드 스크립트가 포함됩니다.

3. Next.js와 Nest.js 연결하기

Next.js와 Nest.js를 모두 설치한 후, 이 두 가지를 연결하여 전체 스택 애플리케이션을 만드는 과정에 대해 설명하겠습니다.

3.1 Nest.js API 개발

우선 Nest.js를 사용하여 API를 개발합니다. 여기에 간단한 사용자 정보를 관리하는 API를 만들어 보겠습니다. app.controller.ts 파일을 다음과 같이 수정하겠습니다.


import { Controller, Get } from '@nestjs/common';

@Controller('users')
export class AppController {
    @Get()
    findAll(): string {
        return '사용자 리스트';
    }
}

3.2 Next.js에서 API 사용하기

이제 Next.js에서 위에서 만든 Nest.js API를 호출해봅시다. pages/index.js 파일을 다음과 같이 수정합니다.


import { useEffect, useState } from 'react';

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

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

    return (
        

            
사용자 리스트

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

        

    );
}

4. 결론

Next.js와 Nest.js의 기본 프로젝트 구조 및 폴더 구조에 대해 알아보았습니다. 이러한 구조는 애플리케이션의 유지 관리를 더 쉽게 만들고, 개발자들이 더 나은 협업을 할 수 있도록 도와줍니다. 또한, 이번 포스트는 Next.js와 Nest.js를 연동하여 API를 호출하는 방법도 간단히 보여 주었습니다. 이 두 기술 스택을 이용해 다양한 웹 애플리케이션을 개발할 수 있으니, 앞으로 더 많은 기능을 추가해 보세요. 감사합니다!