• 현재 우리 앱은 home page밖에 없다. layouts와 pages를 통해 더 많은 routes를 생성하는 방법을 알아보자.
• In this chapter... Here are the topics we’ll cover
  • Create the dashboard routes using file-system routing.
  • Understand the role of folders and files when creating new route segments.
  • Create a nested layout that can be shared between multiple dashboard pages.
  • Understand what colocation, partial rendering, and the root layout are.

Nested routing

• Next.js는 file-system 라우팅을 사용한다. 즉, 폴더를 통해 nested routes를 생성한다는 의미이다.

  

• layout.tsx와 page.tsx 파일을 사용하여 각 route를 위한 개별적인 UI를 생성할 수 있다.

• page.tsx는 React component를 export하는 특별한 Next.js 파일이다.

  • 우리는 이미 앱에 page파일을 갖고 있다: /app/page.tsx - 이 파일은 / route에 해당하는 홈 페이지 파일이라고 볼 수 있다.

• nested route을 만들기 위해서는 폴더 내부에 다시 중첩 폴더를 생성하고, 또다른 page.tsx파일을 해당 폴더 안에 추가해 주면 된다. 예를들면 다음과 같이 말이다:

  

  • /app/dashboard/page.tsx 의 경우 /dashboard path에 해당하는 페이지 파일인 것이다.

Creating the dashboard page

• /app 안에 dashboard라는 폴더를 새로 만들고, 그 안에 page.tsx라는 파일을 생성하여 다음 내용을 채워넣자.

  export default function Page() {
    return <p>Dashboard Page</p>;
  }
  

• 이제 localhost:3000/dashboard 주소로 이동하면 위 컴포넌트를 확인할 수 있다. 이런식으로 Next.js에서는 폴더를 통해 새 route segment를 만들고 특별한 page.tsx 파일을 통해 route에 해당하는 화면을 구현한다.

• 중요한 것은 이 page.tsx 또는 route.tsx 파일에 의해 return되어야만(내부 컴포넌트에서 jsx로 리턴) 유저에게 보인다는 것이다(publicly addressable).

  • 반대로 app 폴더 안에 두면서도 page.tsx에서 리턴하지 않으면 유저가 볼 일은 없다는 것이고, 이를 이용해서 app 폴더 안에 유저에게 보여줄 파일과 그렇지 않을 파일을(UI components, utility files, etc.) 모두 동시에 안전하게 포함할 수 있는데, 이를 colocation이라고 한다.

    

  • 실제로 프로젝트 폴더 구조를 보면 app안에 새로 만든 dashboard말고도 lib나 ui 같은 폴더들이 colocate하고 있는 것을 확인할 수 있다. (이들은 내부에 page.tsx나 route.tsx 파일이 없기 때문에 URL로 접속할 수 없다)

    

Practice: Creating the dashboard pages

• /dashboard/customers와 /dashboard/invoices 라는 nested route 페이지를 새로 추가하라는 과제였고. 그냥 dashboard폴더 안에 customers와 invoices폴더를 만들고, 내부에 page.tsx를 추가하면 되는 간단한 과제다.