Next JS 13버전에서 레이아웃 제외 하는 방법
라우팅 그룹을 이용하는 방법
참고 : Routing Groups
모든 자식에게 필요한 레이아웃 요소만 포함하고 그룹화를 사용하여 공통 섹션에서 레이아웃을 공유한다.
app디렉토리 파일 구조의 예시.
-- (auth)/ # only for grouping, does not add to url
/signin/page.tsx
/singout/page.tsx
/singup/page.tsx
/layout.tsx # shared between auth group only
-- (dashboard)/
/page.tsx # home page
/layout.tsx
-- layout.tsx # main layout, used in ALL pages
Shell
복사
클라이언트 컴포넌트를 이용하는 방법
RootLayout의 경우
RootLayout은 use client 를 사용할 수 없기 때문에, 다음과 같은 방법을 이용해야만 한다.
그 후, usePathname 혹은 useSelectedLayoutSegment 를 이용한다.
1.
/app 하위에 레이아웃 페이지를 만듭니다
// /app/LayoutProvider.tsx
'use client'
import { usePathname } from 'next/navigation';
export const LayoutProvider = ({ children }) => {
const pathname = usePathname();
return (
<>
{pathname === "/posts" && <h1>Welcome to Posts page!</h1>}
{children}
</>
)
};
JavaScript
복사
2.
루트 레이아웃 래핑( /app/layout.tsx)
// /app/layout.tsx
import { LayoutProvider } from './LayoutProvider';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<LayoutProvider>
{children}
</LayoutProvider>
</body>
</html>
)
}
JavaScript
복사
RootLayout이 아닌 경우
RootLayout이 아닌 경우에는, use client 를 사용할 수 있다.
따라서, 특정 폴더 하위의 layout의 경우에는 Provider를 만들 필요없이 사용하면 된다.
useSelectedLayoutSegment 를 이용하는 방법.
// /app/products/layout.tsx
"use client";
import { useSelectedLayoutSegment } from "next/navigation";
import styles from "./product.layout.module.css";
export default function ProductLayout({
children,
}: {
children: React.ReactNode;
}) {
const segment = useSelectedLayoutSegment();
if (segment === "slug2") {
return children;
}
return (
<div>
<nav className={styles.nav}>
<a href="">여성옷</a>
<a href="">남성옷</a>
</nav>
{children}
</div>
);
}
JavaScript
복사
usePathname 를 이용하는 방법.
// /app/products/layout.tsx
"use client";
import { usePathname } from "next/navigation";
import styles from "./product.layout.module.css";
export default function ProductLayout({
children,
}: {
children: React.ReactNode;
}) {
const pathName = usePathname();
if (pathName === "/product/slug2") {
return children;
}
return (
<div>
<nav className={styles.nav}>
<a href="">여성옷</a>
<a href="">남성옷</a>
</nav>
{children}
</div>
);
}
JavaScript
복사