목차)
1. Top-level files
2. Top level folders
3. 참고
Top-level 이란, 프로젝트 구조 및 동작 설정을 하는 레벨을 의미한다.
프로젝트의 최상위 디렉토리에 위치시키며,
특정 이름을 가진 파일 또는 폴더를 생성하여 구조 및 동작을 설정하는 것이 목적이다.
1. Top-level files
1) next.config.js
next.js 프로젝트 설정 파일
(설정 예시)
1. Webpack 설정 변경
2. Webpack loader 추가
3. 페이지 경로 설정
· rewrites(){ ... }
4. plugin 추가
2) _middleware.ts
Next.js의 내장 middleware를 사용하여 서버 사이드와 클라이언트 사이드의 요청을 중간에 가로채고 수정하는 기능
Middleware 란,
소프트웨어 시스템에서 요청과 응답 사이에 위치하여 추가기능을 제공하는 소프트웨어 컴포넌트이다.
(설정 예시)
1. 요청 로깅
2. 인증 및 권한 확인
- ex) 비로그인 유저에 대한 접근 제한 및 로그인 페이지로 이동
3. 데이터 가공 및 검증
4. 에러처리
5. 추가 작업 수행
- ex) 요청에 대한 특정 헤더를 추가하거나, 응답을 캐싱하는 등의 작업을 수행
6. 디렉토리 기준으로 _middleware 작동 범위 설정
- 전역 설정: pages 폴더에 생성 시( pages/middleware ) 전역으로 설정
- 부분 설정:
pages 폴더에 특정 폴더에 생성시 부분 설정,
예를 들어 ( pages/home/_middleware) 구조면 home 에 접근시 middleware 작동
3) .env
환경 변수 설정
1. .env.local
- 로컬 실행 환경일때 적용할 환경 변수
2. .env.production
- 서비스 실행 환경일때 적용할 환경 변수
3. .env.development
- 개발 환경일때 적용할 환경 변수
4) .next-env.d.ts
Next.JS 프로젝트에 사용할 TypeScript 환경 설정 파일
Next.js가 추천하는 tsconfig 세팅을 의미한다.
만약 custom하게 tsconfig를 사용하려면 해당 파일(.next-env.d.ts)를 지우고, tsconfig.json 파일을 생성하여 TypeScript환경을 세팅 한다.
2. Top-level folders
1) app
Next.JS 13버전에서 등장한 새로운 Router 처리 방식
1. 경로 설정 방식(Route)
폴더구조:
src/app/home
경로(URL):
http://localhost:3000/home
2. 대표 Routing File
page.tsx:
접근 가능 경로를 만들면서, 해당 Route에 Page를 생성한다.
layout.tsx:
생성한 Page에 공통 Layout을 래핑한다.
loading.tsx:
Suspense Boundary로 래핑한 컴포넌트 단위에 fallback UI를 표현해준다.
error.tsx:
<ErrorBoundary> 컴포넌트의 fallBack UI를 표현해준다.
2) Public
클라이언트에서 직접 접근 할 수 있는 정적 파일을 저장하고 제공하는 역할
1. 정적 파일 호스팅
image, css 등 웹 어플리케이션에 필요한 자원들을 쉽게 호스팅하여 사용
2. 빌드 프로세스에서 제외됨
Next.js 의 빌드 프로세스에 영향을 받지 않으므로, 원본 그대로를 보여줄 수 있음
3. 라우팅 외 파일 저장
robots.txt, favicon.ico, sitemap.xml 등과 같은 파일 저장
3) Pages
Next.js 13버전 이전의 라우팅 방식
Next.js 13 이상에서 App 과 Pages 는 서로 호환되면, 두 기능을 함께 사용하여 Route 를 설계할 수 있다.
App과 Pages가 가르키는 Route 주소가 같다면, 하나를 지우라는 경고문이 나오게 된다.
3. 참고
Getting Started: Project Structure | Next.js
Using App Router Features available in /app
nextjs.org