Next 13 공식문서 읽기 (2)

Next.js 프로젝트 구조

• 최상위 파일 및 폴더, 구성파일 및 라우팅 규칙에 대한 내용을 설명한다.

최상위 폴더

• app : 앱라우터
• pages : 페이지 라우터
• public : 서비스의 정적 자산(데이터)
• src : 애플리케이션 원본 폴더 (선택사항 )

최상위 파일

• next.config.js : Next.js에 대한 구성 파일
• package.json : 프로젝트 종속성 및 스크립트
• instrumentation.ts : OpenTelementry / instrumentation file (이 부분에 대한 개념은 아직... 애플리케이션의 모니터링을 위한 것 같다.)
• middleware.ts : Next.js 요청 미들웨어
• .env : 환경변수
• .env.local : 로컬 환경변수
• .env.production : 배포 환경변수
• .env.development : 개발 환경변수
• .eslintrc.json : ESLint의 구성파일
• .gitignore : 무시할 git 파일/폴더 설정
• next-env.d.ts : Next.js의 스크립트 선언 파일
• tsconfig.json : 타입스크립트 설정 파일
• jsconfig.json : 자바스크립트 설정 파일

 

앱 라우팅 규칙

1. 라우팅 파일

• layout : 레이아웃 파일
• page : 페이지 파일
• loading : 로딩 UI
• not-found : Not found UI
• error : 에러 UI
• global-error : 전역 오류 UI
• route : 라우터
• template : 템플릿 파일(탐색 중인 자식에 대한 새로운 레이아웃)
• default : 병렬 라우터 fallback 페이지

 

2. 중첩 라우팅

• folder : route segment
• folder/folder : 중첩 route segment

예를 들어, "http://localhost:3000/about"에 대한 라우터는

루트에서 about 폴더를 만들어서 사용한다.

/app
    /about
        page.ts

이렇게 하면 /about에 대한 라우팅을 할 수 있다.

그러므로 "http://localhost:3000/about/me"에 대한 라우팅은

/app
    /about
        /me
            page.ts

위와 같은 방법으로 라우팅을 설정할 수 있다.

 

3. 동적 경로 ( Dynamic Routes)

• [folder] : 동적 경로 세그먼트
• [...folder] : Catch-all 경로 세그먼트
• [[...folder]] : Catch-all 경로 세그먼트 (옵션)

 

4. 라우트 그룹 및 Private 폴더

• (folder): 라우팅에 영향을 주지 않고 경로를 그룹화 (group)
• _folder : 라우팅에서 폴더 및 모든 자식 세그먼트 숨김 ( private )

 

5. 병렬 및 인터셉트 라우트

• @folder : 명명된 슬롯
• (.)folder : 동일 레벨에서 가로채기
• (..)folder : 한 단계 위에서 가로채기
• (..)(..)folder : 두 단계 위에서 가로채기
• (...)folder : 루트에서 가로채기

 

6. 메타데이터 파일 규칙

6-1. 앱 아이콘

이름	확장자	설명
favicon	.ico	파비콘 파일
icon	.ico, .jpg, .png, ...	앱 아이콘 파일
icon	.js, .ts, .tsx	생성된 앱 아이콘
apple-icon	.ico, .jpg, .png, ...	Apple 앱 아이콘 파일
apple-icon	.js, .ts, .tsx	생성된 Apple 앱 아이콘

6-2. 오픈그래프 및 트위터 이미지

이름	확장자	설명
opengraph-image	.jpg, .png, .gif, .jpeg	오픈그래프 이미지 파일
opengraph-image	.js, .ts, .tsx	생성된 오픈그래프 이미지
twitter-image	.jpg, .png, .gif, .jpeg	트위터 이미지 파일
twitter-image	.js, .ts, .tsx	생성된 트위터 이미지

6-3. SEO

이름	확장자	설명
sitemap	.xml	사이트맵 파일
sitemap	.ts, .js	생성된 사이트맵
robots	.txt	로봇 파일
robots	.js, .ts	생성된 로봇 파일

 

 

 

사진 및 내용 출처 : NEXT 공식문서 (https://nextjs.org)

 

---