Next.js 기본 폴더 구조

안녕하세요! 오늘은 Next.js의 기본 폴더 구조와 각 폴더의 역할에 대해 알아보겠습니다. Next.js는 React 기반의 강력한 프레임워크로, 효율적인 개발을 위한 구조화된 폴더 시스템을 제공합니다. 이 구조를 이해하면 프로젝트를 더 체계적으로 관리할 수 있답니다. 자, 그럼 하나씩 살펴볼까요?

Next.js의 기본 폴더 구조

my-next-app/
├── app/
├── components/
├── lib/
├── public/
├── styles/
├── .env
├── .gitignore
├── next.config.ts
├── package.json
└── README.md

각 폴더와 파일의 역할

1. app/ 디렉토리

Next.js 13 버전부터 도입된 새로운 라우팅 시스템의 중심입니다. 여기에는 페이지, 레이아웃, 라우팅 관련 파일들이 위치합니다.

• layout.js: 전체 앱의 레이아웃을 정의합니다.
• page.js: 각 라우트의 페이지 컴포넌트를 정의합니다.

2. components/ 디렉토리

재사용 가능한 React 컴포넌트들을 저장하는 곳입니다. 버튼, 헤더, 푸터 등 앱 전반에 걸쳐 사용되는 UI 요소들이 여기에 위치합니다.

3. lib/ 디렉토리

유틸리티 함수, API 클라이언트, 데이터베이스 연결 등 재사용 가능한 non-React 코드를 저장합니다.

4. public/ 디렉토리

정적 파일들(이미지, 폰트, 파비콘 등)을 저장하는 곳입니다. 이 폴더에 있는 파일들은 루트 URL(/)에서 직접 접근할 수 있어요.

5. styles/ 디렉토리

CSS 파일들을 저장하는 곳입니다. 전역 스타일(globals.css)이나 CSS 모듈 파일들이 여기에 위치합니다.

6. .env 파일

환경 변수를 저장하는 파일입니다. API 키나 데이터베이스 URL 같은 민감한 정보를 여기에 저장하고, .gitignore에 추가하여 버전 관리에서 제외합니다.

7. .gitignore 파일

Git 버전 관리에서 제외할 파일과 디렉토리를 지정하는 파일입니다.

8. next.config.ts 파일

Next.js 설정 파일입니다. 웹팩 설정, 환경 변수, 리다이렉트 규칙 등을 여기서 정의할 수 있습니다.

9. package.json 파일

프로젝트의 메타데이터와 의존성 정보를 담고 있는 파일입니다. npm 스크립트도 여기서 정의됩니다.

 

이렇게 구조화된 폴더 시스템을 사용하면, 프로젝트가 커져도 코드를 쉽게 관리하고 찾을 수 있습니다. 각 폴더의 역할을 잘 이해하고 적절히 사용한다면, 더 효율적이고 유지보수가 쉬운 Next.js 애플리케이션을 만들 수 있을 거예요!Next.js로 프로젝트를 시작할 때 이 구조를 참고해보세요. 물론 프로젝트의 특성에 따라 조금씩 변형해서 사용해도 좋답니다. 여러분만의 효율적인 구조를 만들어보는 것은 어떨까요? 즐거운 코딩 되세요! 😊