page router의 구조

최종 수정 : 2024-05-31

 

설치를 마치고 나면 다음과 같은 구조의 디렉터리가 만들어 진다.

- READMe.md
- next.config.js
- node_modules/
- package-lock.json
- package-json
- pages/
  - _app.js
  - api/
    - hello.js
  - index.js
- public/
  - favicon.ico
  - vercel.svg
- styles/
  - Home.module.css
  - globals.css

 

Next.js에서의 내비게이션은 pages/ 디렉터리를 사용하기 때문에 훨씬 쉽다. pages/ 디렉터리 안의 모든 자바스크립트 파일은 퍼블릭(public) 페이지가 되며, pages/ 디렉터리의 index.js 파일을 복사해서 about.js로 이름을 바꾸면 http://localhost:3000/about 주소로 접근했을 때 똑같은 페이지를 볼 수 있다.

 

반드시 필요한 디렉터리는 public/과 pages/ 뿐이며, 나머지 디렉터리는 필요에 따라 다른 목적으로 사용하거나 지워도 된다. 또한 프로젝트 최상위 디렉터리에 필요한 디렉터리나 파일을 추가해도 Next.js의 빌드 및 개발 프로세스에는 아무런 영향을 주지 않는다.

 

# public/ 디렉터리

웹 사이트의 모든 퍼블릭 페이지와 정적 콘텐츠가 있다. 이미지 파일, 컴파일된 CSS 스타일시트, 컴파일된 자바스크립트 파일, 폰트 등이 있을 수 있다.

 

# styles/ 디렉터리

기본으로 생성된다. 꼭 필요한 것은 아니다.

---

참고 자료

실전에서 바로 쓰는 Next.js (p.26-27)