pages의 루트 컴포넌트 _app.js

Next.js 의 파일 구조를 보면 pages 내부에 기본적으로 _app.js 와 index.js가 있습니다. _app.js는 루트 컴포넌트이며 여러 페이지 컴포넌트(index.js와 같은)들을 렌더링 하게 됩니다.

만약 앱의 모든 페이지에 네비게이션 바를 추가하고싶을 때, 각 페이지마다 컴포넌트를 추가해주기보다는 루트 컴포넌트(_app.js)에 코드를 넣어주면 반복적으로 코드를 작성할 필요가 없게 됩니다.

Layout Wrapper 추가하기

첫번째. Layout 컴포넌트 만들기

import { Fragment } from "react";

const Layout = (props) => {
  return (
    <Fragment>
      <main>{props.children}</main>
    </Fragment>
  );
};

export default Layout;

components/Layout/Layout.js 를 만들었습니다.
나중에 _app.js에서 <Layout> 호출하면서 코드들을 Layout 컴포넌트로 감싸주게 되면,
{props.children} 안에 _app.js의 코드가 들어가게 됩니다.

두번째. MainHeader 컴포넌트 만들기

이 단계는 필수는 아니지만 예시를 위해 작성해보겠습니다.
페이지 상단에 네비게이션 바를 추가한다고 하면,

import Link from "next/link";

import classes from "./MainHeader.module.css";

const MainHeader = () => {
  return (
    <header className={classes.header}>
      <div className={classes.logo}>
        <Link href="/">웹사이트 명</Link>
      </div>
      <nav className={classes.navigation}>
        <ul>
          <li>
            <Link href="/all">링크 예시</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default MainHeader;

위의 코드처럼 만들어 볼 수 있습니다. 왼쪽에 웹사이트 로고가 생기게 되고 우측에는 네비게이션 바가 생깁니다. (CSS코드는 생략)

마지막. _app.js에서 Layout 컴포넌트 import 해주기

import Layout from "../components/Layout/Layout";
import "../styles/globals.css";

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

export default MyApp;

간단하게 기존 코드를 Layout 컴포넌트로 감싸주기만 하면 됩니다!