Next.js로 프로젝트를 진행하던 도중 반복되는 레이아웃이 있어 다중 레이아웃을 적용하였다.
기존 레이아웃
// src/app/layout.ts
import Header from '@/components/Header';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import '../styles/globals.css';
import '../styles/reset.css';
import AuthSession from './_components/AuthSession';
import Provider from './_components/CmapProvider';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: '캠퍼스팟 (Camperspot)',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='ko'>
<body className={inter.className}>
<AuthSession>
<Provider>
<Header />
{children}
</Provider>
</AuthSession>
</body>
</html>
);
}
기존 레이아웃에는 app 내에서 어디서든 사용되는 세션과 Header 컴포넌트를 가지고 있다.
마이페이지를 구성하던 도중에 반복되는 레이아웃이 있어 다중 레이아웃을 적용하였다.
마이페이지 레이아웃
// src/app/profile/[id]/layout.tsx
import Content from './_components/Content';
import Sidebar from './_components/Sidebar';
import styles from './_styles/MypageLayout.module.css';
type Props = {
children: React.ReactNode
};
const MypageLayout = ({children}: Props) => {
return (
<div className={styles.wrapper}>
<div className={styles.container}>
<div className={styles['status-container']}>홈 {'>'} 마이페이지</div>
<div className={styles['content-container']}>
<aside>
<Sidebar />
</aside>
<main>
<Content>{children}</Content>
</main>
</div>
</div>
</div>
);
};
export default MypageLayout;
다중 레이아웃을 적용하는 방식은 똑같이 라우팅 된 폴더 안에서 layout.tsx를 선언하고 안에 레이아웃 코드를 작성하면 된다.
현재 임시로 적용되어있는 레이아웃이다.
Frontend Developer