앱 라우터 및 경로 그룹을 사용하여 Next.js에서 여러 레이아웃 관리-JS 튜토리얼-php.cn

앱 라우터 및 경로 그룹을 사용하여 Next.js에서 여러 레이아웃 관리

Mary-Kate Olsen

풀어 주다： 2025-01-17 02:34:11

원래의

564명이 탐색했습니다.

Managing Multiple Layouts in Next.js with App Router and Route Groups

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!