키모스토리

#4. layout 본문

Web Devlopment/NextJs

#4. layout

키모형 2025. 3. 27. 17:21
반응형

layout.tsx 

Next.js 의 모든 페이지(page.tsx) 들은 layout.tsx를 시작으로 조립 되어 실행됨  (LIke index.js, index.html)

 

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({children, }: { children: React.ReactNode}) {

  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

 

이전 예제에서 /app/page.tsx, /app/about-us/page.tsx 에 import 했던 Navigation 을 layout.tsx 에서 한번만 import 하면

모든 페이지에 자동으로 import 된다.

 

/app/layout.tsx

import Navigation from "../components/navigation"

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({children, }: { children: React.ReactNode}) {

  return (
    <html lang="en">
      <body>
        <Navigation />
        {children}
      </body>
    </html>
  )
}

 

개별 페이지에 별도의 layout을 적용 가능

예) about-us 페이지에 별도의 layout을 적용

- /app/about-us/layout.tsx 파일을 작성

export default function RootLayout({children }: { children: React.ReactNode}) {

  return (
    <div>
      {children}
      &copy; Next JS is great!
    </div>
  )
}

 

 

/app/about-us/layout.tsx에 작성한 내용이 표시됨.

 

이렇게 하위 폴더에 layout.tsx를 작성하면 해당 폴더 하위에 있는 모든 페이지에 동일한 layout이 상속됨

예) /app/about-us/company/jobs/sales 폴더에 page.tsx 작성

export default  function  Page() {
  return <h1>Sales jobs</h1>;
}

 

sales 에 layout 추가

export default function SalesLayout({children }: { children: React.ReactNode}) {

  return (
    <div>
      {children}
      Sales Layout!
    </div>
  )
}

 

 

최종 상태 : 가까운 쪽 Layout이 안쪽으로 중첩이 되면서 전체 Layout이 적용됨.

<html lang="en">
  <body>
    <Navigation />
    <AboutUsLayout>
        <SelesLayout>
            <Seles />
        </SelesLayout>
    </AboutUsLayout>
  </body>
</html>

 

반응형
저작자표시

'Web Devlopment > NextJs' 카테고리의 다른 글

#6. Dynamic Routes  (0) 2025.03.27
#5. metadata  (0) 2025.03.27
#3. Next.js에서의 렌더링 방식  (0) 2025.03.27
#2. navigation, not-found(404)  (0) 2025.03.27
#1. Start Next.js  (0) 2025.03.27
'Web Devlopment/NextJs' Related Articles more