앱 라우터 및 경로 그룹을 사용하여 Next.js에서 여러 레이아웃 관리
- Mary-Kate Olsen원래의
- 2025-01-17 02:34:11566검색
Next.js 13에서는 레이아웃, 오류 경계, 로딩 표시 등과 같은 여러 가지 흥미로운 기능을 갖춘 App Router가 도입되었습니다. 그러나 일부 개발자는 동일한 경로 수준에서 여러 레이아웃을 관리할 때 문제에 직면합니다. 아래에서는 이러한 시나리오에 맞게 깔끔하고 편리한 레이아웃을 구성하고 유지하는 가장 좋은 방법을 보여 드리겠습니다.
1단계: 루트 레이아웃 생성(선택 사항)
루트 레이아웃은 전체 앱에 대한 전역 구성 요소 또는 컨텍스트 공급자를 정의하는 데 유용합니다. 그러나 앱에 전역 구성이 필요하지 않은 경우 이 단계를 건너뛸 수 있습니다.
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<RootProviders>
{children}
</RootProviders>
</body>
</html>
);
}
2단계: 특정 경로 그룹에 대한 레이아웃 정의
/home 및 /contact 페이지에 머리글과 바닥글이 필요하다고 가정해 보겠습니다. 이를 달성하기 위해 Next.js 경로 그룹을 사용할 수 있습니다.
예를 들어 (marketing)이라는 경로 그룹을 만들고 그 안에 페이지를 배치하겠습니다. app/(marketing)/home/page.tsx 및 app/(marketing)/contact/page.tsx와 같은 페이지는 app/(marketing)/layout.tsx 레이아웃을 사용합니다.
// app/(marketing)/layout.tsx
export default function MarketingLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<Providers>
<Header />
<main>{children}</main>
<Footer />
</Providers>
);
}
3단계: 다른 경로 그룹에 대한 레이아웃 생성
마찬가지로 /policy 및 /tos와 같은 페이지의 경우 (legal)이라는 새 경로 그룹을 만들고 이에 대한 특정 레이아웃을 정의할 수 있습니다.
// app/(legal)/layout.tsx
export default function LegalLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<Header />
<main className="container mx-auto">{children}</main>
</>
);
}
주요 이점
이 접근 방식을 사용하면 다음을 수행할 수 있습니다.
- 동일한 수준의 경로에 대해 여러 레이아웃을 유지합니다.
- 프로젝트 구조를 깔끔하고 체계적으로 유지하세요.
- 특정 레이아웃에 대해 Google Analytics와 같은 특정 기능을 구현합니다. 예를 들어, /policy 및 /tos와 같은 페이지에 대해 LegalLayout 내에 분석 추적을 추가할 수 있습니다.
Next.js는 경로 그룹 및 레이아웃을 활용하여 애플리케이션을 위한 모듈식, 확장 가능, 유지 관리 가능한 아키텍처를 생성할 수 있도록 지원합니다.
위 내용은 앱 라우터 및 경로 그룹을 사용하여 Next.js에서 여러 레이아웃 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!