6.Next.js와 Nest.js 기본 프로젝트 구조 만들기, Next.js의 페이지와 Nest.js의 모듈 구성하기

JavaScript 생태계에서 Next.js와 Nest.js는 각각 프론트엔드와 백엔드 개발에 혁신적인 접근 방식을 제공합니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 웹 사이트 생성을 간편하게 처리할 수 있도록 도와줍니다. 반면, Nest.js는 Node.js의 기반 위에 구축된 프로그레시브한 백엔드 프레임워크로, 모듈화와 클래스 기반의 아키텍처를 강조합니다. 본 강좌에서는 Next.js와 Nest.js의 기본 프로젝트 구조를 만드는 방법과 각각의 페이지 및 모듈 구성하는 방법에 대해 자세히 알아보겠습니다.

1. Next.js 프로젝트 구조 이해하기

Next.js 프로젝트는 일반적으로 다음과 같은 구조를 가집니다:

    my-next-app/
    ├── public/
    ├── pages/
    ├── components/
    ├── styles/
    ├── package.json
    └── next.config.js

여기서 각 디렉토리와 파일의 역할은 다음과 같습니다:

  • public/: 정적 파일(이미지, 아이콘 등)을 저장하는 디렉토리입니다. 이곳에 있는 파일은 “/” 경로로 접근할 수 있습니다.
  • pages/: Next.js에서 가장 중요한 디렉토리로, 애플리케이션의 각 페이지를 정의합니다. 파일 이름이 URL 경로에 직접적으로 매핑됩니다. 예를 들어, pages/index.js는 루트 페이지(/)를 나타냅니다.
  • components/: 여러 페이지에서 재사용할 수 있는 React 컴포넌트들을 저장하는 디렉토리입니다.
  • styles/: CSS 파일이나 스타일 관련 모듈을 여기에 보관합니다. Next.js는 CSS와 Sass를 지원합니다.
  • package.json: 프로젝트의 메타데이터와 의존성을 정의합니다.
  • next.config.js: Next.js의 다양한 설정을 구성할 수 있는 파일입니다.

2. Nest.js 프로젝트 구조 이해하기

Nest.js 프로젝트는 다음과 같은 구조를 가집니다:

    my-nest-app/
    ├── src/
    │   ├── app.module.ts
    │   ├── main.ts
    │   └── /
    │       ├── .module.ts
    │       ├── .controller.ts
    │       └── .service.ts
    ├── test/
    ├── package.json
    └── tsconfig.json

각 디렉토리와 파일의 역할은 다음과 같습니다:

  • src/: 애플리케이션의 모든 소스 코드를 포함합니다. Nest.js의 핵심 로직이 여기에 위치합니다.
  • app.module.ts: 애플리케이션의 루트 모듈입니다. 모든 모듈을 조합하는 역할을 합니다.
  • main.ts: 애플리케이션의 진입점으로, Nest.js 서버를 시작하는 파일입니다.
  • /: 특정 모듈을 위한 디렉토리입니다. 각 모듈은 controller, service 및 다른 관련 파일들을 포함할 수 있습니다.
  • test/: 테스트 관련 파일을 저장하는 디렉토리입니다.
  • package.json: 프로젝트의 메타데이터와 의존성을 정의합니다.
  • tsconfig.json: TypeScript 컴파일러 설정 파일입니다.

3. Next.js 프로젝트 만들기

먼저 Next.js 프로젝트를 만듭니다. 터미널에서 다음 명령어를 실행하세요:

npx create-next-app my-next-app

이 명령어는 Next.js의 템플릿을 기반으로 새로운 프로젝트를 생성합니다. 생성된 my-next-app 디렉토리로 이동한 후 실행하면 기본 Next.js 애플리케이션을 확인할 수 있습니다:

cd my-next-app
npm run dev

브라우저를 열고 http://localhost:3000에 접속하면 기본 페이지를 확인할 수 있습니다.

4. Nest.js 프로젝트 만들기

Nest.js 프로젝트를 생성하기 위해 Nest CLI를 사용합니다. 먼저 Nest CLI를 설치합니다:

npm i -g @nestjs/cli

설치가 완료되면 새로운 Nest.js 프로젝트를 생성합니다:

nest new my-nest-app

생성된 my-nest-app 디렉토리로 이동하여 서버를 실행합니다:

cd my-nest-app
npm run start

브라우저를 열고 http://localhost:3000에 접속하면 기본 Nest.js 애플리케이션을 확인할 수 있습니다.

5. Next.js의 페이지 구성하기

Next.js에서 페이지를 구성하기 위해 pages/ 디렉토리에 새로운 JavaScript 파일을 추가합니다. 예를 들어, pages/about.js를 생성하고 다음 코드를 작성합니다:

import React from 'react';

    const About = () => {
        return (
            

                
About Us

                
이곳은 우리의 소개 페이지입니다.

            

        );
    };

    export default About;

웹 브라우저에서 http://localhost:3000/about를 열면 방금 작성한 소개 페이지를 확인할 수 있습니다. Next.js는 파일 기반 라우팅을 지원하기 때문에, 다른 페이지를 추가하는 것도 매우 쉬운 작업입니다.

6. Nest.js의 모듈 구성하기

Nest.js에서는 모듈을 통해 애플리케이션을 구성합니다. 예를 들어, ‘users’ 모듈을 생성하고 구성하는 방법을 보겠습니다. 터미널에서 다음 명령어를 실행하여 모듈을 생성합니다:

nest generate module users
nest generate controller users
nest generate service users

이 명령어는 src/users/ 디렉토리를 생성하고, 사용자 관리에 필요한 서비스 및 컨트롤러를 자동으로 생성합니다. src/users/users.module.ts 파일을 다음과 같이 수정합니다:

import { Module } from '@nestjs/common';
    import { UsersController } from './users.controller';
    import { UsersService } from './users.service';

    @Module({
        controllers: [UsersController],
        providers: [UsersService],
    })
    export class UsersModule {}

이제 src/users/users.controller.ts와 src/users/users.service.ts 파일을 수정하여 컨트롤러와 서비스의 로직을 추가할 수 있습니다. 아래는 사용자 목록을 반환하는 간단한 서비스와 컨트롤러의 예입니다.

import { Controller, Get } from '@nestjs/common';
    import { UsersService } from './users.service';

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

        @Get()
        getAllUsers() {
            return this.usersService.findAll();
        }
    }
    
import { Injectable } from '@nestjs/common';

    @Injectable()
    export class UsersService {
        private readonly users = ['Alice', 'Bob', 'Charlie'];

        findAll() {
            return this.users;
        }
    }

위의 코드를 바탕으로 Nest.js 애플리케이션에서 사용자 목록을 반환하는 API를 구성할 수 있습니다. 브라우저에서 http://localhost:3000/users에 접속하면 사용자 목록을 확인할 수 있습니다.

7. Next.js와 Nest.js를 함께 사용하기

Next.js와 Nest.js를 함께 사용하여 풀스택 애플리케이션을 구축할 수 있습니다. 이러한 구조에서는 Next.js가 프론트엔드 부분을 담당하고, Nest.js가 백엔드 API를 제공하는 역할을 수행합니다. 다음 단계에서는 두 애플리케이션이 서로 통신할 수 있도록 설정합니다.

7.1. Nest.js API 서버 설정

먼저 Nest.js 애플리케이션을 다음과 같이 설정하여 CORS를 활성화합니다:

import { NestFactory } from '@nestjs/core';
    import { AppModule } from './app.module';

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

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

Next.js 애플리케이션에서 Nest.js API를 호출하려면 데이터 패칭을 위해 axios와 같은 라이브러리를 사용할 수 있습니다. pages/index.js 파일을 다음과 같이 수정합니다:

import React, { useEffect, useState } from 'react';
    import axios from 'axios';

    const Home = () => {
        const [users, setUsers] = useState([]);

        useEffect(() => {
            const fetchUsers = async () => {
                const response = await axios.get('http://localhost:3000/users');
                setUsers(response.data);
            };
            fetchUsers();
        }, []);

        return (
            

                
사용자 목록

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

            

        );
    };

    export default Home;

이제 Next.js 애플리케이션의 홈 페이지에서 Nest.js API를 통해 사용자 목록을 가져오는 기능이 추가되었습니다.

8. 결론

Next.js와 Nest.js를 함께 사용하여 풀스택 애플리케이션을 구축하는 방법에 대해 살펴보았습니다. 각 프레임워크의 프로젝트 구조와 구성 방법을 이해하고, 두 애플리케이션 간의 데이터 통신을 설정하는 과정을 통해, 여러분은 효율적이고 강력한 애플리케이션을 개발할 수 있습니다.

이번 강좌를 통해 Next.js와 Nest.js의 기본적인 사용법뿐만 아니라, 실제로 프로젝트를 설정하고 페이지 및 모듈을 구성하는 방법을 배웠습니다. 앞으로 이 두 기술을 바탕으로 더욱 발전된 애플리케이션을 만들어보시기를 바랍니다.