Nextjs가 페이지를 렌더링할 때 먼저 layout.jsx파일을 읽는다.
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>
)
}
만약 현재 사용자가 about-us페이지에 있다면 실제로 Nextjs는
<RootLayout>
<AboutUs />
</RootLayout>이렇게 렌더링을 진행하고 있는 것이다.
따라서 body태그안에 반복되어 각 페이지에 보이길 원하는 요소를 넣으면 모든 페이지에서 확인이 가능하다.
기존에 반복되던 Navigation 컴포넌트를 없애고, Layout에 Navigation을 원하는 위치에 추가하면 모든 페이지에서 볼 수 있다.
about-us폴더에 layout을 생성하게되면, mainPage에서 만든 layout과 중첩되어 적용된다.
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<div>
{children}
© Next JS is great!
</div>
);
}
위에서 Layout으로 넣었던 Navigation 컴포넌트가 위에 생성되어있고, aboutus Page컴포넌트가 그 아래에, 그리고 about-us의 layout에 children아래 생성된 footer형식의 데이터가 출력되는 것을 볼 수 있다.
그렇다면 aboutus폴더 하위폴더에있는 page에서 또 layout을 추가하면 어떻게 될까
중첩된 layout들이 하위 페이지에서 모두 적용되는 것을 보여준다.
이렇게 중첩된 Layout이 페이지에 적용되어 있는 것이다.
<RootLayout>
<AboutUsLayout>
<Sales />
</AboutUsLayout>
</RootLayout>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>
);
}RootLayout에 metadata가 자동으로 생성되어있다.
해당 데이터는 일반 react프로젝트의 index.html파일 내부의 head태그에서 title과 description을 표시한 것과 동일한 기능을 제공해주는 것이다.
따라서 해당 부분의 title과 description을 수정하면 해당 layout이 적용되는 페이지에서의 title과 description이 수정된다.
만약 페이지마다의 title을 변화시키고 싶다면 해당 페이지의 page.tsx파일에 적용을 시켜줘도 된다.
layout파일에 작성하게되면 영향을 받는 모든 페이지에 적용되기 때문이다.
export const metadata = {
title: "NextJS 연습페이지",
description: "NextJS 연습페이지입니다.",
};
export default function App() {
return (
<div>
<h1>Hello!</h1>
</div>
);
}
이렇게 원하는 페이지에만 metadata를 적용시킬 수 있다.
만약 metadata가 중복된다면, 중첩되지 않고 병합된다.
이렇게 홈페이지에 title을 넣고, RootLayout에 description을 적용시키면 두 데이터가 병합되어 적용된다.
AboutUs에만 적용할 title을 지정해주고, RootLayout의 description을 유지하고자 설정하면
두 metadata가 병합되는 것을 볼 수 있다.
metadata는 page, layout에서만 내보낼 수 있고, 컴포넌트에선 내보낼 수 없다. 또 metadat는 서버컴포넌트에서만 있을 수 있다.
하지만 페이지가 생길떄마다 metadata를 지정해줄 순 없다.
export const metadata: Metadata = {
title: {
template: "%s | Next Pages",
default: "Loading...",
},
description: "NextJS 연습페이지입니다.",
};%s의 자리에 해당 페이지에서 지정한 title값이 들어가게되고, title을 지정하지 않았다면 default로 지정된 값이 title로 지정된다.
각각의 지정된 title이 %s에 지정되고, title이 지정되지 않은 Not found페이지는 default 값이 지정된 것을 볼 수 있다.
'2차 공부 > TIL' 카테고리의 다른 글
| 24.08.26 Next JS Data Fetching / loading (0) | 2024.08.26 |
|---|---|
| 24.08.23 NextJS 동적라우팅 (1) | 2024.08.23 |
| 24.08.22 yarn vite js react 에 eslint적용하기 (0) | 2024.08.22 |
| 24.08.22 react-test 공부 2 / toHaveStyle, toBeDisabled, getByRole, userEvent (0) | 2024.08.22 |
| 24.08.21 TDD체험해보기 (0) | 2024.08.21 |