page.js

페이지 파일(page.js)은 넥스트 앱 라우터에서 해당 URL로 이동하기 위해 기본적으로 작성해야 하는 페이지 컴포넌트를 의미합니다. 파일 이름은 page로 해야 하며 다른 이름을 사용할 수 없습니다.

tip

파일 이름은 page로 하고 확장자는 선호에 따라서 js, jsx, tsx를 사용합니다. 자바스크립트 프로젝트인 경우에는 jsx를 타입스크립트 프로젝트인 경우에는 tsx를 추천합니다 :)

page.js 기본

페이지 파일은 앱 라우터에서만 사용할 수 있습니다. 기존의 페이지 라우팅이 pages 폴더 밑에서 작성된 파일 이름을 기준으로 페이지 접속이 가능했다면, 앱 라우터에서는 다음과 같이 app 폴더 밑에서 page.js로 접근합니다.

app/
  page.js ← '/'로 접근했을 때 표시될 페이지 컴포넌트

위 파일 구조도의 설명과 같이 /로 접근하면 app 폴더 바로 아래에 있는 page.js 파일의 내용이 화면에 표시됩니다.

폴더와 page.js

이번에는 app 폴더 밑에 여러 개의 폴더를 만들고 page.js 파일을 배치했을 때 어떤 결과가 나오는지 보겠습니다.

app/
  login/
    page.js ← '/login'으로 접근했을 때 표시될 페이지 컴포넌트
  profile/
    page.js ← '/profile'로 접근했을 때 표시될 페이지 컴포넌트

위 폴더 구조도는 app 폴더 밑에 login, profile 폴더들을 생성하고 그 아래에 page.js 파일을 배치했습니다. app 폴더를 시작으로 폴더의 이름이 URL의 위계가 됩니다. 만약 위와 같이 폴더를 구성했더라도 page.js 파일이 없다면 해당 URL로 접근할 수 없습니다.

app/
  login/ ← '/login'으로 접근하더라도 페이지가 표시되지 않음. 유효한 URL이 아니라고 판정됨
  profile/
    page.js ← '/profile'로 접근했을 때 표시될 페이지 컴포넌트