https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages
In this chapter....
- 파일-시스템 라우팅을 통해 dashboard 루트를 생성한다.
- 새 루트 segment 생성 시 폴더/파일의 역할을 이해한다.
- 여러 대시보드 페이지 간 공유될 수 있는 nested 레이아웃 생성
- colocation, 부분 렌더링, 루트 레이아웃 이해
Nested routing
Next.js는 폴더가 nested 루트 생성에 쓰일 때 파일-시스템 라우팅을 사용한다.
각 폴더는 URL segment와 매핑되는 루트 segment를 표시한다.
layout.tsx와 page.tsx를 사용해 각 루트에 대한 분리된 UI를 생성할 수 있다.
page.tsx
- 리액트 컴포넌트를 export 하는 특별한 Next.js 파일
- 루프에 접근 가능하게 요청 됨
- 우리 앱에선 /app/page.tsx에 있음 : 루트 / 와 연관있는 홈페이지
nested 루트 생성 위해, 각 내부에 폴더를 nest하고 page.tsx 파일을 추가한다.
/app/dashboard/page.tsx 는 /dashboard 경로와 연관 있다.
Creating the dashboard page
- /app 안에 dashboard라는 새 폴더를 생성한다.
- dashboard 폴더 안에 page.tsx 파일을 생성한다.
- 서버를 구동시키면 Page 컴포넌트 내 글을 볼 수 있다.
이게 Next.js에서 다른 페이지를 생성하는 방법이다
=> 폴더를 통해 새 루트 세그먼트를 생성하고, 이 안에 page 파일을 넣는다.
page 파일의 특별한 이름을 통해, Next.js는 네가 UI 컴포넌트, 테스트 파일, 다른 관련 코드를 colocate 하게 한다.
page 파일 내 컨텐츠만 public하게 접근된다.
예시로, /ui 와 /lib 폴더는 /app 폴더 안에서 그것들의 루트와 colocate 된다.
Practice: Creating the dashboard pages
-
Customers Page
http://localhost:3000/dashboard/customers 를 통해 접근 되고
<p>Customers Page</p>
를 보여준다.
-
Invoices Page
http://localhost:3000/dashboard/invoices fh wjqrmsgkrh
<p>Invoices Page</p>를 반환한다.
Creating thd dashboard layout
대시보드는 여러 페이지를 가로지르며 공유하는 네비게이션이 있다.
Next.js에서 , 여러 페이지 간 공유하는 UI를 만들기 위해 layout.tsx 파일을 만들 수 있다.
/dashboard 폴더 안에서, layout.tsx을 만들고 다음 코드를 붙여넣는다.
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}코드 해석
- 첫번째로, 컴포넌트를 import 한다.
컴포넌트는 children prop을 받는다. 자식은 페이지나 레이아웃 둘 다 될 수 있다.
이 케이스에서, /dashboard 안의페이지는 자동으로 다음과 같이 nest 된다.
다음과 같은 모습을 볼 수 있다.
Next.js에서의 레이아웃 사용의 장점은 네비게이션에서는,
페이지 컴포넌트만 레이아웃이 리렌더 되지 않는 동안 업데이트 된다는 것이다.
이것이 partial rendering 이다.
Root layout
CH3에서, Inter 폰트를 다른 레이아웃으로 불러왔다: /app/layout.tsx
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}이것은 root layout이라고 불리고 요청된다.
루트 레이아웃에 추가되는 모든 UI는 앱 내에서 모든 페이지를 거슬러서 공유된다.
루트 레이아웃을 과 수정 + metadata 추가 시 사용할 수 있다.
새롭게 생성한 레이아웃 /app/dashboard/layout.tsx는 대시보드 페이지에 고유하기 때문에, 루트 레이아웃에 UI를 더 추가할 필요가 엇다.
