Project Structure

최상위 폴더

app : app 라우터
public : 정적 에셋들을 저장하는 폴더
src: 소스 파일들을 저장하는 폴더

 

 

최상위 파일

next.config.js : next.js 설정파일
package.json : 프로젝트 의존성과 스크립트들
instrumentation.ts : 오픈텔레메트리와 계측 파일(?)
middleware.ts : Next.js가 요청하는 미들웨어
.env : 환경 변수
.env.local : 지역 환경 변수
.env.production : 배포 환경 변수
.env.development : 개발 환경 변수
.eslintrc.json : ESLint를 위한 설정 파일
.gitignore
next-env.d.ts : Next.js를 위한 타입스크립트 선언 파일
tsconfig.json : 타입스크립트 설정 파일
jsconfig.json : 자바스크립트 설정 파일

 

 

app 라우팅 컨벤션

라우팅 파일

layout : 레이아웃
page : 페이지
loading : 로딩 UI
not-found : Not found UI
error : 에러 UI
global-error : 전역 에러 UI
route : API 엔드포인트
template : 리렌더링된 레이아웃
default : 병렬 경로 대체 페이지

 

중첩 라우트

folder : 라우트
folder/folder : 중첩 라우트

 

동적 라우트

[folder] : 동적 라우트
[...folder] : 모든것을 포함하는 라우트
[[...folder]] : 선택적으로 모든것을 포함하는 라우트

 

라우트 그룹과 개인 폴더

(folder) : 라우팅에 영향을 끼치지 않는 그룹 라우트
_folder : 라우팅에서 폴더 및 모든 하위 선택

 

병렬과 인터셉트 라우트

@folder: 이름있는 슬롯
(.)folder : 같은 레벨 인터셉트
(..)folder : 한 단계 위의 레벨 인터셉트
(..)(..)folder : 두 단계 위의 레벨 인터셉트
(...)folder : 루트 인터셉트