Next.js는 리액트 기반의 프레임워크로, 프론트엔드 개발을 보다 쉽고 효율적으로 할 수 있도록 도와줍니다. 이번 글에서는 Next.js 프로젝트의 기본 파일 구조에 대해 알아보겠습니다.
1. pages 디렉토리
pages 디렉토리는 Next.js 프로젝트의 핵심 디렉토리입니다. 이 디렉토리에는 각각의 페이지를 정의하는 파일들이 위치합니다.
index.js: 프로젝트의 루트 페이지로, 기본적으로/경로에 매핑됩니다.[name].js: 동적 라우팅을 사용하는 페이지로, URL 경로에 동적으로 변하는 값이 있을 때 사용됩니다. 예를 들어,/users/username경로에 매핑되는 페이지는users/[username].js파일에 정의할 수 있습니다.
2. components 디렉토리
components 디렉토리는 재사용 가능한 리액트 컴포넌트들을 저장하는 디렉토리입니다. 여기에는 프로젝트 내의 여러 페이지에서 사용되는 UI 요소들을 작성할 수 있습니다.
3. public 디렉토리
public 디렉토리는 정적 파일들을 저장하는 디렉토리입니다. 여기에는 이미지, CSS 파일 등 클라이언트 측에서 접근해야 하는 파일들을 저장할 수 있습니다.
4. styles 디렉토리
styles 디렉토리는 CSS 파일들을 저장하는 디렉토리입니다. Next.js에 기본적으로 내장되어 있는 CSS 모듈 시스템을 사용하려면 이 디렉토리를 사용할 수 있습니다. 각 파일은 해당 컴포넌트에 대한 스타일을 정의합니다.
5. API 디렉토리
pages/api 디렉토리는 Next.js에서 제공하는 서버리스 함수를 작성할 수 있는 디렉토리입니다. 여기에는 클라이언트에서 호출될 API 엔드포인트를 작성할 수 있습니다.
6. 기타 파일
Next.js 프로젝트의 파일 구조에는 이외에도 node_modules 디렉토리, package.json 파일 등 프로젝트의 의존성과 설정 파일들이 존재합니다.
이상으로 Next.js 프로젝트의 파일 구조에 대해 간략하게 알아보았습니다. Next.js의 편리한 파일 구조를 이용하여 개발을 보다 쉽게 진행할 수 있습니다.
참고 자료: