Nested routing
-
Next.js에서는 폴더를 사용하여 중첩된 route(경로)를 만든다.
- 이는 각 폴더가 URL Segment에 매핑되는 route Segment를 나타낸다는 것을 의미한다.
- 쉽게 말해, Next.js에서는 폴더를 사용하여 중첩 경로를 만드는 Nested routing이라는 방식으로 애플리케이션 내에 더 많은 페이지를 생성할 수 있도록 한다.
-
layout.tsx,page.tsx파일을 사용하여, 경로 별 별도의 공통 UI 및 페이지 만들 수 있다.page.tsx파일은 특별한 Next.js의 파일이다. React 컴포넌트를 내보내기(export)하며, 경로에 access하기 위해 꼭 필요하다.- 예를 들어,
/app/page.tsx는 루트의/위치와 관련된 가장 최상단의 홈 페이지이다.
Dashboard Page(대시보드 페이지) 만들기
- 먼저
app디렉터리 하위에dashboard (/app/dashboard)디렉터리를 생성한 후, 그 내부에page.tsx를 생성한 다음, 아래와 같은 내용을 작성해보자.
export default function Page() {
return <p>Dashboard Page</p>;
}- 그 다음 개발서버의 실행을 확인한 후 여기를 클릭해보면, 앞서 입력한 내용이 출력되는 것을 확인할 수 있을 것이다.
Dashboard Layout(대시보드 레이아웃) 만들기
-
대시보드에는 여러 페이지에서 공유되는 일종의 내비게이션이 있다. 만약 Next.js에서 여러 페이지들이 공유해야하는 UI를 만들어야 한다면,
layout.tsx이라는 특수한 파일을 생성하여 사용할 수 있다. -
대시보드 페이지를 위한 레이아웃을 만들기 위해
/dashboard디렉터리 안에layout.tsx이라는 파일을 생성한 후, 아래 코드를 작성해보자.-
아래 코드는,
<SideNav />컴포넌트를 레이아웃에 가져오고 있다. 이런 식으로, 해당 파일에 가져온 모든 컴포넌트는 레이아웃의 일부가 된다. -
또한,
<Layout />컴포넌트는children이라는props를 받는다. 이것은 하위 페이지이거나, 또다른 레이아웃일 수 있다.- 여기서는
/dashboard내의 페이지가 자동으로<Layout />내에 중첩될 것이다.
- 여기서는
-
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>
);
}
- 만약,
Module not found: Can't resolve '@/app/ui/fonts'라는 오류가 발생한다면,/app/ui/font.ts에 아래 코드를 추가로 작성해야 한다.
// ...이전코드
export const lusitana = Lusitana({
weight: ["400", "700"],
subsets: ["latin"],
});- 그 다음,
/app/ui/acme-logo.tsx에서 해당lusitana폰트 데이터를 불러와야 한다.
루트 레이아웃(Root Layout)
- 우리는 앞선 Chapter3 학습 과정에서,
/app/layout.tsx에Inter폰트를 가져온 적이 있다.- 이 작업을 해 준 덕분에, 해당 디렉터리 경로 아래의 모든 페이지에서는 따로 폰트 설정을 추가로 진행하지 않더라도
Inter폰트를 사용할 수 있다.
- 이 작업을 해 준 덕분에, 해당 디렉터리 경로 아래의 모든 페이지에서는 따로 폰트 설정을 추가로 진행하지 않더라도
- 이처럼 Next.js 프로젝트의 최상단 경로에 위치(
/app)하여, 모든 하위 페이지에 공통의 UI를 적용할 수 있도록 필수적으로 구현해야 하는 레이아웃(/app/layout.tsx)을 루트 레이아웃이라고 부른다.
import "@/app/ui/global.css";
import { inter, lusitana } from "@/app/ui/font";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
{/* 여기! */}
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}- 루트 레이아웃을 사용하면,
<html>및<body>태그를 수정하고 메타데이터를 추가할 수 있다.- 메타데이터에 대해서는 Chapter16(메타데이터) 에서 자세히 알아볼 수 있다.
- 참고로, 이번에 새로 만든 레이아웃
(/app/dashboard/layout.tsx)은 대시보드 페이지가 존재하는 하위 경로(/app/dashboard/...)의 페이지에만 적용되기 때문에, 최상단 레이아웃인 루트 레이아웃에는 어떤 UI도 추가할 필요가 없다.
프론트엔드 입문 개발자입니다.