NEXT.JS : Layout, (괄호folder), metadata

<angeLog/>·2024년 3월 23일

NEXT.JS

목록 보기

6/7

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

Layout?

여러 페이지에서 동일한 layout을 사용할 수 있도록 component를 구성하는 기능.
단일 레이아웃을 사용한다면 최상위layout파일에 component를 import하여 구성하고, 페이지별로 다른 레이아웃을 사용해야한다면 각페이지마다 layout파일을 추가한다.

Root Layout

Next는 layout을 먼저 확인 하고, layout 컴포넌트의 children prop을 page로 render한다.

//최상위 layout
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <h1>최상위 레이아웃</h1>
        {children}
      </body>
    </html>
  );
}

Nested Layout

Next에서 layout이 여러개 있을 경우 상쇄되는 것이 아니라 중첩된다.
예를들어 최상위 layout말고도 about폴더에 layout이 더 있다면, 두개의 레이아웃이 동시에 보여진다.

※하위 레이아웃을 생성할 때는 html, body가 아닌 div로 component를 감싸야한다.

//about폴더 layout.tsx추가
export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <h1>하위 레이아웃</h1>
      {children}
    </div>
  );
}

about폴더에 추가한 layout이 중첩되어 보여지는 것을 확인 할 수 있다.

(괄호foloer)

Next는 rout-group이라는 재미난 기능이 있다. 이것은 page파일에만 한정된 것인데,
(괄호foloer)를 만들어 그 안으로 옮겨도 url에는 아무런 변화 없이 작동한다.

metadata

Next의 metadata는 병합된다.

최상위 layout파일의 상단에는 metadata가 존재한다. 이 metadata를 여러 페이지에 작성하여 페이지마다 다른 metadata를 보여줄 수 있다.

//최상위 layout.tsx
export const metadata = {
  title: {
    template: '%s | Next Movies',
    default: 'Loading...',
  },
  description: 'The best movies on the best framework',
};

//최상위page.tsx
export const metadata = {
  title: 'HOME',
};

//about폴더 page.tsx
export const metadata = {
  title: 'ABOUT',
};

각각의 파일에 입력한 metadata가 병합되어 화면에 출력되는 것을 볼 수 있다.
이처럼 필요에 따라 다양한 metadata를 보여줘야할 때 유용히 사용하고 head에 직접 입력하지 않고도 검색엔진최적화SEO가 가능하다.

※'use client'에서는 사용할 수 없다!

👉🏻NEXT.JS공식문서 Metadata

일단 해볼게요!✍🏻

이전 포스트

NEXT.JS : Hydration, 'use client'

다음 포스트