[React] Next.js 레이아웃 설정

References

https://logfetch.com/nextjs-multiple-layouts/

 

 

개요

Next.js의 경우 기존 React와 달리 별다른 라우터 사전 설정이 필요 없는 장점이 있다.

그로 인해, 레이아웃을 설정하는 방법이 달라지는데 어떻게 해야 하는지 알아보자.

 

 

레이아웃 기본 설정

레이아웃 파일 만들기

레이아웃 파일을 생성한 뒤 다음과 같이 구현한다.

/** DefaultLayout.js */
/** 레이아웃 파일 명칭은 자유! */

import { NavigationBar } from '../components/Header/NavigationBar';
import { Footer } from '../components/Footer/Footer';

// children : 해당 레이아웃에 종속될 컴포넌트
export default function DefaultLayout({ children }) {
  return (
      <>
          {/* 이런 식으로 공통되는 구현부와 다르게 해야하는 구현부를 작성한다 */}
          <NavigationBar />
          <div>
              { children }
          </div>
          <Footer />
      </>
  );
}

 

레이아웃 파일 적용하기

/pages/_app.js 내부에 해당 레이아웃 파일을 적용한다.

/** _app.js */

import '../styles/globals.css'
// 만든 레이아웃 가져오기
import DefaultLayout from '../layouts/DefaultLayout'; 

function MyApp({ Component, pageProps }) {
    return (
        <>
            {/* 이런 식으로 태그를 씌워 레이아웃을 적용한다! */}
            <DefaultLayout >
                <Component {...pageProps} />
            </DefaultLayout >
        </>
    ) 
}

export default MyApp;

이런식으로 공통되는 구현부를 재활용한다!

 

 

다양한 레이아웃 설정

이번에는 다양한 레이아웃을 통해 페이지를 다채롭게(?) 만들어보자.

 

레이아웃 파일 만들기

똑같이 레이아웃 파일을 생성해서 구현한다.

/** EmptyLayout.js */

// 레이아웃 파일마다 props는 공통적으로 적용할 것!
export default function EmptyLayout({ children }) {
  return (
      <>
          <div>
              { children }
          </div>
      </>
  );
}

 

레이아웃 파일 적용하기

/pages/_app.js 내부에 해당 레이아웃 파일을 적용한다.

/** _app.js */

import '../styles/globals.css'
// 만든 레이아웃 가져오기
import DefaultLayout from '../layouts/DefaultLayout';
import EmptyLayout from '../layouts/EmptyLayout';

// 여러 레이아웃 별로 Key:Value를 설정한다 (Key 명칭은 자유!)
const layouts = { 
    L1: DefaultLayout,
    L2: EmptyLayout,
};

function MyApp({ Component, pageProps }) {
    // 해당 레이아웃 별(Component.layout) 지정된 페이지(children)를 불러온다
    const Layout = layouts[Component.layout] || ((children) => <>{children}</>);

    return (
        <>
            {/* 정의 된 Layout 태그로 레이아웃을 적용 */}
            <Layout>
                <Component {...pageProps} />
            </Layout>
        </>
    ) 
}

export default MyApp;

 

레이아웃 파일 지정하기

각 페이지마다 원하는 레이아웃을 지정한다.

/** pages/index.js */

import { NewAlbum } from '../components/Main/NewAlbum';
import { PopularContent } from '../components/Main/PopularContent';

// export할 함수명.layout = "_app.js에 지정한 레이아웃 Key 명칭";
Home.layout = "L1";
export default function Home() {

    return (
      <>
          <NewAlbum />
          <PopularContent />
      </>
    );
}

/** pages/auth/signIn.js */

// 이런 식으로 각 페이지마다 원하는 레이아웃을 지정하면 된다!
signIn.layout = "L2";
export default function signIn() {
    return (
        <>
            ...
        </>
    );
}

네비게이션 바가 있는 레이아웃 페이지

네비게이션 바가 없는 레이아웃 페이지