[Next.js] Layout으로 공통 화면 구성하기
Web app을 개발하다보면 네비게이션바나 footer와 같이 공통적으로 사용할 컴포넌트가 필요한 경우가 자주 발생합니다.
이것을 매번 일일이 해주려면 여간 귀찮은 일이 아니죠.
Next.js에서는 layout이라는 기능으로 이것을 지원하고 있습니다.
Create Project
create-next-app을 사용해서 프로젝트를 생성합니다.
그리고 기본 페이지 구성을 위해 다음과 같이 넣어줍니다.
// app/page.tsx
export default function Home() {
return (
<div className="h-screen w-screen flex flex-col justify-center items-center">
<div>Home</div>
</div>
);
}
// app/menu/[id]/page.tsx
export default function Menu({ params }: { params: { id: string } }) {
return (
<div className="h-screen w-screen flex flex-col justify-center items-center">
<h1>Menu: {params.id}</h1>
</div>
);
}이제 재료가 준비되었으니 layout에 대해 살펴보겠습니다.
Layout
간단하게 layout의 동작에 대해 살펴보겠습니다.
프로젝트를 생성하면 기본적으로 layout.tsx 파일이 생성됩니다. 이 파일은 삭제를 해도 다시 생성이 되요.
프레임워크에서 관리를 하고 있는 파일이라는 뜻이죠.
// app/components/navigation.tsx
export default function Navigation() {
return (
<div className="w-screen h-12 fixed bg-gray-900 flex justify-center items-center text-white">
<div>Navigation Bar</div>
</div>
);
}
// app/layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<Navigation />
{children}
</body>
</html>
);
}앱을 실행시켜서 브라우저로 확인해 보세요.
다른 페이지로 이동을 해도 Navigation은 항상 보이는 것을 알 수 있어요.
하위 경로의 모든 페이지에 적용이 되기 때문입니다.
Navigation Bar
이제 위에서 알아본 layout을 이용하여 navigation bar를 만들어 보겠습니다.
Next.js는 Link도 제공을 해줘서 쉽게 navigation을 만들 수 있어요.
import Link from "next/link";
export default function Navigation() {
return (
<div className="w-screen h-12 fixed bg-gray-900 flex justify-center items-center text-white gap-4">
<Link href={"/"}>Home</Link>
<Link href={"/menu/1"}>Menu 1</Link>
<Link href={"/menu/2"}>Menu 2</Link>
<Link href={"/menu/3"}>Menu 3</Link>
</div>
);
}브라우저를 통해 확인해 보세요.
너무 쉽게 navigation bar가 만들어졌죠? 이래서 next.js를 좋아합니다. 😄
Sub Layout
layout은 하위 경로의 모든 페이지에 적용된다고 설명드렸었죠?
이를 이용하여 특정 페이지 그룹에만 공통적으로 적용되는 컴포넌트도 만들 수 있어요.
// app/components/footer.tsx
export default function Footer() {
return (
<div className="w-screen h-8 bg-gray-800 fixed bottom-0 flex justify-center items-center text-white gap-4">
Copyright © 2024 llHoYall
</div>
);
}
// app/manu/layout.tsx
import Footer from "../components/footer";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<div>
{children}
<Footer/>
</div>
);
}이제 menu의 하위에만 Footer가 적용되는 것을 확인하실 수 있습니다.
Wrap Up
이번 포스팅에서는 next.js의 layout 기능에 대하여 알아보았습니다.
확실히 최신 framework 답게 UI 구성을 위한 편의 기능들이 많아서 작업이 수월합니다.
잘 활용해서 편하게 개발해 보세요.