Next.js 공통 레이아웃 구성하기: Header, Footer 분리와 적용

1. 공통 레이아웃이 필요한 이유

Next.js 프로젝트에서 페이지마다 반복되는 UI(Header, Footer 등)가 있다면, 이를 Layout 컴포넌트로 분리해 재사용할 수 있습니다.

이 방식은 유지보수성과 개발 효율성을 크게 향상시켜줍니다.

2. 폴더 구조 설계

/pages
  _app.js
  index.js
  about.js

/components
  Layout.js
  Header.js
  Footer.js

3. Layout 컴포넌트 생성

// components/Layout.js
import Header from './Header';
import Footer from './Footer';

export default function Layout({ children }) {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-1 p-4">{children}</main>
      <Footer />
    </div>
  );
}

4. Header 컴포넌트

// components/Header.js
export default function Header() {
  return (
    <header className="bg-blue-600 text-white p-4">
      <h1 className="text-xl font-bold">My Next.js App</h1>
    </header>
  );
}

5. Footer 컴포넌트

// components/Footer.js
export default function Footer() {
  return (
    <footer className="bg-gray-800 text-white text-center p-3 text-sm">
      © 2025 My App. All rights reserved.
    </footer>
  );
}

6. _app.js에서 Layout 적용

// pages/_app.js
import '../styles/globals.css';
import Layout from '../components/Layout';

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

7. 실수했던 부분과 해결

• ❌ <Header> 컴포넌트 안에서 <Header> 태그를 사용하여 무한 호출 → <header> 소문자로 변경 필요
• ❌ export default function page() 처럼 소문자 컴포넌트 → React가 인식 못함 → Page()처럼 대문자로 시작해야 정상 동작

8. 최종 확인

이제 어떤 페이지로 이동하더라도 상단에는 Header, 하단에는 Footer가 항상 함께 렌더링되며 일관된 레이아웃을 갖게 됩니다.

Tailwind CSS를 활용해 기본적인 스타일도 적용하여 사용자 경험도 개선되었습니다.

9. 다음 단계

이제 공통 레이아웃이 완성되었으므로 다음으로는 Header에 메뉴를 넣거나, 인증이 필요한 페이지 구성으로 확장할 수 있습니다.