[Nextjs] 프로젝트 구조 (Project Structure)

Next.js 프로젝트 구성은 어떻게 될까?

프로젝트를 구성할때 nextjs에서 폴더 및 파일에 대해서 살펴보자면

1. 최상단 폴더 구성 - app, page, public, src로 최상위 파일 폴더 이름으로 구성되어있다.
2. 최상단 파일 구성 - next.config.js, package.json, instrumentation.ts, middleware.ts, .env 등으로 구성되어있다.

next.config.js	nextjs를 위한 구성 설정 파일
package.json	프로젝트 설치파일들 의존성 및 스크립트 실행 설정 파일
instrumentation.ts	OpenTelemetry 와 Instrumentation을 구성하는 파일  - OpenTelemetry의 경우 nextjs의 성능 개선을 위한 모니터링 관련이다.  - Instrumentatiation 파일 안에서 register()함수를 통해 cold booting (맨 처음 nextjs를 실행할때) 함수가 실행된다고 한다.  -> side effect가 발생할 수 있는 import파일들을 따로 register안에서 처리해서 실행할려고 할때 유용한 예로 보여주고있다고 한다.
middleware.ts	서버 middleware 요청을 처리할때 사용하는 파일 NextRequest와 NextResponse의 nextjs에서 제공하는 응답객체를 가지고 미들웨어를 적용한 페이지에서 처리한다.
.env	환경변수 파일
.env.local	로컬 환경변수 파일
.env.production	배포 환경변수 파일
.env.development	개발 환경변수 파일
.eslintrc.json	eslint 설정 파일  eslint의 경우는 스타일가이드로 IDE에서 코드 작성시에 오류 및 정해진 스타일 가이드 규칙을 잡아준다.
.gitignore	git에서 업로드시 무시할 파일을 설정하는 파일
next-env.d.ts	nextjs에서 Typescript 선언 설정 파일
tsconfig.json	Typescript 관련 설정 파일
jsconfig.json	Javascript 관련 설정 파일
postcss.config.js	Tailwind CSS 관련 설정 파일

그리고 각각 최상단 폴더 안에서의 app, page에서도 nextjs에서 규정한 파일 이름 컨벤션이 존재한다. 

app폴더안에서의 구조는

• layout
• page
• loading
• not-found
• error
• global-error
• route
• template
• default 

위의 파일 이름 형식으로 구성되어있다. 그리고 nested로 구성할수도 있다고 한다.

 

page폴더안에서의 구조는

• _app
• _document
• _error
• name/index (페이지 이름)

위의 구조로 되어있다. 다이나믹 루트로 [...name]/index 이런식으로 사용되기도 한다.

 

https://nextjs.org/docs/getting-started/project-structure

Getting Started: Project Structure | Next.js

 

그 이외에는 여러가지 SEO관련 sitemap, robot 파일들이 있다.