로고

Next.js 프로젝트 시작하기: Next.js 앱 생성과 주요 디렉토리 구조.

작성일 :

Next.js 프로젝트 시작하기: Next.js 앱 생성과 주요 디렉토리 구조

Next.js는 React를 기반으로 하는 서버사이드 렌더링 프레임워크로, 높은 퍼포먼스와 SEO 최적화를 지원합니다. Next.js 프로젝트를 시작하고 주요 디렉토리 구조를 이해하면, 복잡한 웹 애플리케이션을 보다 효율적으로 개발할 수 있습니다. 이 글에서는 Next.js 애플리케이션을 생성하는 방법과 주요 디렉토리 구조에 대해 다루겠습니다.

Next.js 설치 및 프로젝트 설정

Next.js 프로젝트를 시작하기 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. 먼저 Node.js와 npm이 설치되어 있는지 확인합니다. 설치되어 있지 않다면, Node.js 공식 사이트에서 설치할 수 있습니다.

bash
node -v
npm -v

Next.js 프로젝트 생성

프로젝트를 생성하는 가장 간단한 방법은 create-next-app 명령어를 사용하는 것입니다. 이 명령어는 Next.js 앱을 부트스트랩하고 기본 설정을 자동으로 구성해줍니다.

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

명령어를 실행하면, my-next-app이라는 폴더에 기본 설정이 완료된 Next.js 프로젝트가 생성됩니다.

프로젝트 실행

프로젝트가 생성된 후, 개발 서버를 시작하여 앱을 실행할 수 있습니다.

bash
npm run dev

디폴트로, 개발 서버는 http://localhost:3000에서 실행됩니다. 브라우저에서 이 URL을 열어 Next.js 애플리케이션을 확인할 수 있습니다.

주요 디렉토리 구조

Next.js로 생성된 프로젝트의 디렉토리 구조는 React 프로젝트와 유사하지만, 특정 디렉토리와 파일이 추가되어 있습니다. 각 디렉토리는 Next.js의 특정 기능을 담당합니다.

pages

pages 디렉토리는 Next.js 프로젝트의 핵심 디렉토리 중 하나입니다. 여기에는 애플리케이션의 모든 페이지 컴포넌트가 포함됩니다. 각 파일은 URL 경로와 1대1로 매핑됩니다.

예를 들어, pages/index.js 파일은 루트 / URL에 매핑되고, pages/about.js 파일은 /about URL에 매핑됩니다.

public

public 디렉토리는 정적 파일들을 저장하는 곳입니다. 이 디렉토리 내에 있는 파일들은 최종 애플리케이션에 의해 정적 자원으로 제공됩니다. 이미지, 폰트, 기타 자산 파일을 여기에 보관할 수 있습니다.

styles

styles 디렉토리는 스타일 시트 파일을 보관하는 디렉토리입니다. globals.css 파일은 전역에 적용될 CSS를 포함할 수 있습니다.

components

components 디렉토리는 재사용 가능한 React 컴포넌트를 저장하기 위한 디렉토리입니다. 이 디렉토리를 사용하면 프로젝트 구조를 좀 더 깔끔하고 모듈화할 수 있습니다.

추가 디렉토리와 파일

Next.js 프로젝트에는 추가적으로 구성 파일들이 포함될 수 있습니다. 대표적인 파일들로는 next.config.js, .env, babel.config.js 등이 있습니다. 이러한 파일들은 프로젝트의 환경설정과 모듈 사용을 간편하게 해줍니다.

next.config.js

next.config.js 파일은 Next.js 애플리케이션의 설정을 담고 있습니다. 예를 들어, 특정 환경 변수나 플러그인을 설정할 수 있습니다.

.env

환경 변수 파일로, 개발 중 필요한 API 키 또는 기타 비공개 정보를 저장할 수 있습니다. 예를 들어, .env.local 파일에 환경변수를 정의하면 로컬 개발 환경에서만 적용됩니다.

babel.config.js

babel.config.js 파일은 Babel 설정을 담고 있습니다. Babel은 최신 JavaScript 문법을 구버전 브라우저에서도 사용할 수 있게 변환하는 도구입니다.

마무리

이 글에서는 Next.js 프로젝트를 생성하고 주요 디렉토리 구조에 대해 이해하는 방법을 다루었습니다. Next.js는 강력한 기능과 유연성을 제공하여 복잡한 웹 애플리케이션 개발을 돕습니다. 프로젝트를 시작하고 주요 디렉토리에 익숙해지면, 더 높은 생산성과 효율성을 얻을 수 있습니다.