Next.js에서 레이아웃 사용하기

next · 2021년 4월 20일 · 7 min read

2026년 기준 안내

이 글은 2021년에 작성한 Pages Router 기준 예제입니다.
현재 Next.js 프로젝트에서 새로 레이아웃을 구성한다면 App Router의 app/layout.tsx와 중첩 레이아웃을 먼저 검토하는 편이 좋습니다.

최신 방식은 Next.js App Router에서 레이아웃 사용하기에 따로 정리했습니다.

들어가며

안녕하세요.
오늘은 Nuxt에서 자주 사용하던 레이아웃 개념을 Next.js에서도 구현해 보았습니다.
예제를 통해 직접 레이아웃을 구성해 봅시다.

홈페이지를 구성할 때, 우리는 대체로 네비게이션과 푸터, 플로팅 버튼 등을 포함합니다.
개발단계에서 이들 컴포넌트를 페이지마다 일일이 import하는 것은 매우 비효율적인 일입니다.

만약 이들처럼 대부분의 페이지에서 보여줘야될 내용이 있다면,
레이아웃 컴포넌트를 통해 손쉽게 유지보수할 수 있을 것입니다.

만들기

1. /components/Layouts 폴더를 생성하고 Default.js 파일을 생성합니다.

레이아웃들을 저장하는 폴더에 각 유저 시나리오 대로 필요한 레이아웃들을 구성해둘 것입니다.
이번 예제에서는 가장 기본적으로 네비게이션과 푸터를 포함한 레이아웃을 만들어 보겠습니다.

2. 아래 코드를 입력합니다.

import Head from 'next/head'

import Nav from '@/components/Nav'
import Footer from '@/components/Footer'

const DefaultLayout = (props) => {
  return (
    <div className="layout">
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charSet="utf-8" />
      </Head>

      <Nav></Nav>
      <div className="content-wrapper">{props.children}</div>
      <Footer></Footer>
    </div>
  )
}

레이아웃 구성 시 Head를 사용하여 메타태그와 같은 헤더정보를 포함한다면 더 좋은 구성이 될것입니다.

3. 페이지에서 import하여 사용합니다.

import DefaultLayout from '@/components/Layouts/Default'

export default function index() {
  return (
    <DefaultLayout>
      <div>레이아웃 테스트</div>
    </DefaultLayout>
  )
}