Next.js | 14버전 앱 라우터 - layout.tsx

샘샘·2024년 8월 1일

Next.js 14

목록 보기
3/5

루트 경로에 만든 layout.tsx 파일에서 설정한 레이아웃은 모든 페이지에 적용된다

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      {children}
      &copy; Next JS is great!
    </div>
  );
}

각 페이지 폴더에 만든 레이아웃 파일은 해당 url로 이동하면 보여진다
다른 페이지에서는 보이지 않고 루트 경로에 있는 레이아웃과 중첩되어 보여짐

만약 특정 url에서는 상위 페이지의 레이아웃을 적용하고 싶지 않다면?

강의를 듣는 다른 사람들의 댓글을 긁어왔다
(출처를 밝히기 위해 아이디를 가리지 않았습니다!)

url을 조건부 처리해서 레이아웃이 보이지 않게 해야하는데 layout.tsx에서는 use client를 사용하지 못하니까(SSR에서만 가능한 metadata 때문) 레이아웃의 ui가 실제 적용된 components/navigation.tsx 파일에서 조건부 처리를 해주는 것이 좋겠다는 의견이다

0개의 댓글