3. 프로젝트 구조 이해하기 – Next.js의 기본 폴더 구조 및 파일 설명

 Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 손쉽게 구현할 수 있도록 도와줍니다. 이번 글에서는 Next.js 프로젝트의 기본 폴더 구조와 주요 파일들을 설명하여, 프로젝트의 구조를 이해하고 효율적으로 개발할 수 있도록 도와드리겠습니다. 초보자도 쉽게 따라 할 수 있도록 자세히 설명드리겠습니다.

1. Next.js 프로젝트의 기본 폴더 구조

Next.js 프로젝트를 생성하면, 몇 가지 중요한 폴더와 파일들이 자동으로 생성됩니다. 이 구조를 이해하는 것이 프로젝트를 개발하는 데 큰 도움이 됩니다. 아래는 기본적으로 생성되는 폴더와 파일들입니다.

my-next-app/
├── node_modules/
├── public/
├── pages/
├── styles/
├── .gitignore
├── package.json
└── README.md

주요 폴더 및 파일 설명:

• node_modules: 프로젝트에서 사용하는 모든 외부 라이브러리와 패키지가 저장됩니다. 이 폴더는 npm install 명령어를 실행하면 자동으로 생성됩니다.
• public: 정적 파일을 저장하는 디렉토리입니다. 이미지, 아이콘, 폰트 등의 정적 파일을 이곳에 두고 프로젝트에서 사용합니다.
• pages: Next.js의 핵심 폴더입니다. 이 폴더 내에 있는 JavaScript 파일들은 자동으로 라우팅되어 각 페이지를 만듭니다.
• styles: CSS 파일을 관리하는 디렉토리입니다. 기본적으로 제공되는 globals.css와 Home.module.css 파일이 포함되어 있습니다.
• .gitignore: Git으로 버전 관리를 할 때, 추적하지 않을 파일이나 폴더를 지정하는 파일입니다.
• package.json: 프로젝트의 메타데이터와 의존성을 관리하는 파일입니다. Next.js 관련 설정도 이곳에서 관리됩니다.
• README.md: 프로젝트에 대한 설명을 작성하는 파일입니다.

2. 중요한 폴더 및 파일 자세히 살펴보기

각 폴더와 파일의 역할을 구체적으로 살펴보겠습니다.

a. pages 폴더

pages 폴더는 Next.js에서 가장 중요한 폴더입니다. 이 폴더 내에 존재하는 파일들은 URL 경로와 자동으로 연결됩니다. 예를 들어, pages/index.js 파일은 루트 경로(http://localhost:3000)에 해당하는 페이지를 담당합니다.

• pages/index.js: 기본 홈 페이지
• pages/about.js: /about 경로에 해당하는 페이지

예시 코드:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page of our Next.js application.</p>
    </div>
  );
}

이 코드처럼, pages 폴더 내에 있는 각 파일은 해당 경로에 매핑되어 자동으로 라우팅됩니다.

b. public 폴더

public 폴더는 웹 애플리케이션에서 사용할 정적 파일을 저장하는 장소입니다. 이곳에 저장된 파일은 프로젝트 내에서 상대 경로로 접근할 수 있습니다. 예를 들어, 이미지 파일을 public/images 폴더에 두고, 아래와 같이 사용합니다.

<img src="/images/logo.png" alt="Logo" />

c. styles 폴더

styles 폴더에는 CSS 파일이 저장됩니다. 기본적으로 globals.css 파일과 Home.module.css 파일이 포함되어 있으며, 이 파일들을 수정하여 프로젝트의 스타일을 변경할 수 있습니다.

/* styles/globals.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

3. 기타 중요한 파일

a. package.json

package.json 파일은 프로젝트의 의존성, 스크립트, 그리고 메타데이터를 관리하는 파일입니다. 예를 들어, Next.js를 실행하기 위한 명령어와 필요한 패키지들이 이 파일에 명시됩니다.

{
  "name": "my-next-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  }
}

b. .gitignore

Git을 사용할 때, 추적하지 않을 파일을 지정하는 .gitignore 파일도 중요합니다. 예를 들어, node_modules 폴더와 *.log 파일은 보통 Git에서 제외합니다.

# .gitignore 예시
node_modules/
*.log

4. Next.js의 폴더 구조 이해하기의 중요성

Next.js의 폴더 구조를 이해하는 것은 프로젝트의 효율적인 관리와 유지보수에 매우 중요합니다. 각 폴더의 역할을 명확히 이해하고, 그에 맞게 파일을 관리하면 프로젝트가 커졌을 때도 혼란을 줄일 수 있습니다.

결론

이번 글에서는 Next.js 프로젝트의 기본적인 폴더 구조와 주요 파일들을 살펴보았습니다. pages 폴더를 중심으로 자동 라우팅되는 구조, public 폴더를 활용한 정적 파일 관리, styles 폴더를 통한 스타일링 방법 등을 이해하셨다면, Next.js 프로젝트를 더욱 효율적으로 개발할 수 있을 것입니다.

Next.js는 매우 직관적인 구조를 가지고 있어, 프로젝트가 커질수록 더욱 관리하기 쉬워집니다. 기본적인 폴더 구조를 잘 이해하고, 필요한 파일들을 적절히 활용하여 개발을 진행하세요.