Next.JS에서 사용자 정의 레이아웃을 만드는 방법
Next.js는 고성능 React 애플리케이션을 구축하기 위한 강력한 프레임워크입니다. 그 기능 중 하나는 페이지에 대한 사용자 정의 레이아웃을 생성하여 응용 프로그램 전체에서 쉽게 유지 관리하고 업데이트할 수 있는 일관된 디자인을 생성할 수 있는 기능입니다.
Next.JS에서 사용자 정의 레이아웃 구성 요소 만들기
Next.js 프로젝트의 구성 요소 라는 폴더에서 Layout.jsx를 만들고 다음 코드를 추가하여 레이아웃 구성 요소를 만듭니다.
import Head from 'next/head'
import Header from './Header.jsx'
import Footer from './Footer.jsx'
const Layout = (children) => (
<div>
<Head>
<title>My App</title>
<link rel="stylesheet" href="/static/css/style.css" />
</Head>
<Header />
{children}
<Footer />
</div>
)
export default Layout
이 구성 요소는 머리글 및 바닥글 구성 요소를 가져오고 자식을 소품으로 허용합니다. Header와 Footer 구성 요소 사이에 자식을 렌더링합니다 . 이 레이아웃으로 페이지를 감싸면 상단과 하단에 머리글과 바닥글이 표시됩니다.
레이아웃 구성 요소 사용
레이아웃 구성 요소를 사용하려면 페이지 구성 요소로 가져와서 아래와 같이 사용합니다.
import Layout from '../components/Layout'
const Page = () => (
<Layout>
<h1>Home</h1>
</Layout>
)
export default Page
이 페이지에 레이아웃을 적용합니다. 레이아웃을 적용하려는 모든 페이지에 이 과정을 반복할 수 있습니다.
애플리케이션의 모든 페이지에서 한 번에 레이아웃을 사용하려면 레이아웃 구성 요소를 /page/_app.js 파일로 가져와서 다음과 같이 사용합니다.
import Layout from "../components/layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
지금까지 표시된 예제는 Next.js 12페이지 폴더를 사용합니다. Next.js 13에서는 앱 폴더에 레이아웃을 만듭니다(작성 당시에는 베타 버전임).
앱 폴더에 사용자 정의 레이아웃 만들기
Next.js 13의 앱 폴더는 기본에 루트 레이아웃을 생성해야 합니다. 이것은 Next.js가 애플리케이션의 모든 페이지에 적용할 레이아웃입니다.
시연하려면 layout.jsx 라는 파일을 만들고 다음 코드를 추가합니다.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
루트 레이아웃 구성 요소는 자식을 수락하고 렌더링합니다 . 다음은 루트 레이아웃에 대해 알아야 할 몇 가지 사항입니다.
- 앱 폴더에 포함해야 합니다.
- Next.js 12의 페이지 폴더에 있는 _app.js 및 _document.js를 대체합니다 .
- HTML 및 body 태그를 명시적으로 포함해야 합니다.
- 기본적으로 서버 구성 요소입니다.
언급했듯이 루트 레이아웃은 모든 페이지에 적용되므로 다양한 경로 세그먼트에 대한 사용자 정의 레이아웃을 어떻게 생성합니까?
앱 폴더에서 각 경로 세그먼트에 대한 폴더를 생성하여 경로를 정의할 수 있습니다. 예를 들어 기사 라는 폴더를 생성하면 URL 경로 app/articles 에 매핑됩니다 . 경로 세그먼트를 더 추가하려면 기본 경로 폴더 내에 하위 폴더를 만듭니다. 예를 들어, 기사 폴더 안에 Trending 이라는 폴더를 추가하면 URL 경로 app/articles/trending 에 매핑됩니다 .
layout.jsx 구성 요소를 경로 폴더에 추가하면 해당 경로 세그먼트 및 해당 하위 폴더 내의 모든 페이지에 적용됩니다. 예를 들어 기사 폴더 에 레이아웃 구성 요소를 추가하면 Trending 하위 폴더 의 페이지를 포함하여 기사 경로의 모든 페이지에 적용됩니다 . Trending 폴더 에 레이아웃 구성 요소도 추가하면 기사 폴더의 레이아웃이 그 안에 중첩됩니다.
레이아웃 사용의 이점
Next.js를 사용하면 여러 페이지에서 재사용할 수 있는 레이아웃 구성 요소를 만들 수 있습니다. 이를 통해 여러 페이지에 걸쳐 코드를 복제하지 않고도 웹 사이트에서 일관된 모양을 가질 수 있습니다. 또한 레이아웃은 각 페이지를 변경할 필요가 없기 때문에 변경 사항을 신속하게 구현하는 데 도움이 됩니다.
답글 남기기