NextJs: 인덱스 페이지 전용 레이아웃 파일을 만드는 방법

Next.js 레이아웃 및 경로 그룹화 이해

Next.js에서 앱 디렉토리는 애플리케이션의 라우팅 및 레이아웃 구조의 기초 역할을 합니다. 이 디렉터리 내에서는 일반적으로layout.jsx 및 page.jsx 파일을 찾을 수 있습니다.

루트 레이아웃(app/layout.jsx)
목적: 앱 폴더의 루트에 있는 레이아웃.jsx가 루트 레이아웃 역할을 합니다. 이는 달리 지정하지 않는 한 이 레이아웃 내에서 렌더링된 모든 페이지(하위 구성 요소)가 모든 경로에 적용됨을 의미합니다.

홈페이지 전용 레이아웃
때로는 루트 또는 인덱스 페이지(/)가 전역 페이지와 다른 고유한 특정 레이아웃을 갖기를 원할 수도 있습니다. 경로 그룹화를 사용하여 이를 달성하는 방법은 다음과 같습니다.

*해결책: * 경로 그룹화 사용
Next.js의 경로 그룹화를 사용하면 URL 구조에 영향을 주지 않는 방식으로 경로를 구성할 수 있습니다. 구현 방법은 다음과 같습니다.

디렉토리 구조:

app
├── layout.jsx         # Root layout for all pages
└── (home)
    ├── layout.jsx     # Dedicated layout for the root ('/') page
    ├── page.jsx       # The index or root page

*구현 세부정보: *
폴더 이름 지정: 폴더 이름 주위에 괄호()를 사용하여 경로 그룹화용임을 나타냅니다. 이 경우 (home)은 URL 경로를 변경하지 않습니다. 해당 페이지는 '/'에서 계속 액세스할 수 있습니다.
파일 이동: page.jsx를 (home) 폴더로 이동하고 이 페이지에 대한 특정 레이아웃을 위해 이 폴더 안에 레이아웃.jsx를 만듭니다.

*이렇게 하면: *

글로벌 레이아웃(app/layout.jsx)은 '/'를 제외한 다른 모든 경로에 적용됩니다.
전용 레이아웃(app/(home)/layout.jsx)은 루트 경로에만 적용되므로 홈 페이지에만 고유한 스타일이나 동작이 가능합니다.

*혜택: *

모듈화: 각 경로 또는 경로 그룹의 경험을 독립적으로 맞춤화할 수 있습니다.
SEO 및 UX: 다양한 레이아웃을 통해 SEO에 최적화하거나 특정 페이지의 사용자 경험을 향상할 수 있습니다.

*고려사항: *

라우팅 문제를 방지하려면 경로 그룹의 명명 규칙(괄호 사용)을 엄격히 준수해야 합니다.

이 접근 방식은 디렉토리 구조를 깔끔하게 유지할 뿐만 아니라 사이트의 각 세그먼트가 URL 경로에 영향을 주지 않고 고유한 특성이나 구조를 가질 수 있는 유연한 디자인을 허용합니다.

특정 사용 사례에 따라 자유롭게 조정하세요.

위 내용은 NextJs: 인덱스 페이지 전용 레이아웃 파일을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!