5.Next.js와 Nest.js 기본 프로젝트 구조 만들기, TypeScript 설정과 기본 디렉토리 구성

최근 웹 개발의 트렌드에서 Next.js와 Nest.js는 각각 프론트엔드 및 백엔드 개발에서 매우 인기가 있습니다. Next.js는 React 기반의 프레임워크로 SEO 친화적인 서버 사이드 렌더링(SSR)을 지원하며, Nest.js는 타입스크립트를 사용하여 효율적인 서버 애플리케이션을 구축하는 데 최적화된 프레임워크입니다. 이번 글에서는 Next.js와 Nest.js를 결합하여 기본 프로젝트 구조를 만들고, TypeScript 설정 및 기본적인 디렉토리 구조에 대해 자세히 살펴보겠습니다.

1. Next.js 소개

Next.js는 React 애플리케이션을 위한 강력한 프레임워크로, 다양한 기능을 제공합니다. 다음은 Next.js의 주요 특징입니다:

서버 사이드 렌더링(SSR): SEO와 초기 로딩 성능 향상을 위해 페이지를 서버에서 렌더링합니다.
정적 사이트 생성(SSG): 정적 파일 생성으로 빠른 퍼포먼스를 제공합니다.
API 라우트: 간단한 API를 서버에서 구축할 수 있습니다.
자동 코드 분할: 페이지에 필요한 자바스크립트 코드만 로드합니다.

2. Nest.js 소개

Nest.js는 Node.js에서 서버 애플리케이션을 구축하기 위한 프레임워크로, TypeScript를 사용하여 생산성을 높입니다. Nest.js의 특징은 다음과 같습니다:

모듈화: 코드 구조를 개선하고 관리하기 쉽게 합니다.
의존성 주입: 서비스 간의 의존성을 쉽게 관리할 수 있습니다.
확장성: 필요에 따라 모듈을 추가하여 기능을 확장할 수 있습니다.
테스트 용이성: 코드를 단위 테스트하기 쉽게 구조화되어 있습니다.

3. 프로젝트 생성

이제 Next.js와 Nest.js가 설치된 개발 환경을 설정해보겠습니다. 각 프레임워크의 프로젝트를 생성하고 기본적인 디렉토리 구조를 설명하겠습니다.

3.1 Next.js 프로젝트 생성

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

위의 명령어를 터미널에 입력하여 Next.js 프로젝트를 생성합니다. my-next-app은 프로젝트 이름이며, 필요에 따라 변경할 수 있습니다.

3.2 Nest.js 프로젝트 생성

npm i -g @nestjs/cli
nest new my-nest-app

위의 명령어를 사용하여 Nest.js 프로젝트를 생성합니다. my-nest-app이 프로젝트 이름입니다. 안정성을 위해 npm이 아닌 yarn을 사용할 수도 있습니다.

4. TypeScript 설정

Next.js와 Nest.js 두 프로젝트 모두 TypeScript를 사용하여 작성할 수 있습니다. 기본적으로 Next.js에서 TypeScript를 설치하면 tsconfig.json 파일이 생성됩니다. Nest.js도 마찬가지로 기본적으로 TypeScript로 설정되어 있습니다.

4.1 Next.js TypeScript 설정

Next.js는 TypeScript 설정이 이미 포함되어 있으므로, 아래 파일을 수정하거나 추가하여 추가 설정을 할 수 있습니다.

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "baseUrl": "."
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

4.2 Nest.js TypeScript 설정

Nest.js에서는 프로젝트 기본 구성이 TypeScript를 사용하도록 되어 있습니다. tsconfig.json 파일도 기본적으로 다음과 같이 설정되어 있습니다:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "lib": ["es6", "dom"],
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules", "dist"]
}

5. 기본 디렉토리 구성

Next.js와 Nest.js 프로젝트 각각의 기본 디렉토리 구조를 알아보겠습니다.

5.1 Next.js 기본 디렉토리 구성

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

my-next-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── vercel.svg
│   └── ...
├── src/
│   ├── pages/
│   ├── components/
│   └── styles/
├── .gitignore
├── package.json
├── tsconfig.json
├── next.config.js
└── README.md

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

public: 정적 파일을 저장하는 디렉토리입니다. 이미지, 폰트 등 클라이언트에서 직접 접근할 수 있는 파일을 저장합니다.
src/pages: Next.js에서 페이지를 정의하는 디렉토리입니다. 각 파일 이름이 URL 경로로 매핑됩니다.
src/components: 재사용 가능한 컴포넌트를 정의하는 디렉토리입니다.
src/styles: CSS 파일 및 스타일 관련 파일을 저장합니다.
next.config.js: Next.js 설정 파일입니다. 필요한 모든 구성 설정을 여기에 추가할 수 있습니다.

5.2 Nest.js 기본 디렉토리 구성

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

my-nest-app/
├── node_modules/
├── src/
│   ├── app.module.ts
│   ├── app.controller.ts
│   ├── app.service.ts
│   └── main.ts
├── test/
├── .eslintrc.js
├── package.json
├── tsconfig.json
├── jest.config.js
└── README.md