[Next.JS] 특정 페이지에서 root layout을 적용시키고 싶지 않은 경우

Next.js에서 루트 레이아웃에 헤더와 푸터가 기본적으로 포함되어 있지만, 특정 페이지에서 이를 제외하고 싶다면, 다음과 같은 방법을 사용할 수 있다.

_app.js에서 조건부 렌더링 사용하기:

_app.js 파일에서 각 페이지를 조건부로 헤더와 푸터를 포함시킬 수 있다.
예를 들어, 특정 페이지에서만 헤더와 푸터를 제외하고 싶다면 다음과 같이 할 수 있다:

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

function MyApp({ Component, pageProps }) {
  const noHeaderFooter = ['/no-header-footer']; // 헤더와 푸터를 제외할 페이지 경로

  return (
    <>
      {!noHeaderFooter.includes(Component.name) && <Header />}
      <Component {...pageProps} />
      {!noHeaderFooter.includes(Component.name) && <Footer />}
    </>
  );
}

export default MyApp;

각 페이지에서 레이아웃을 정의하기:

페이지 컴포넌트에서 getLayout 함수를 사용하여 레이아웃을 정의할 수 있다.
이렇게 하면 특정 페이지에서 커스텀 레이아웃을 사용할 수 있다.

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page);

  return getLayout(<Component {...pageProps} />);
}

export default MyApp;

// pages/no-header-footer.js
export default function NoHeaderFooterPage() {
  return <div>이 페이지는 헤더와 푸터가 없습니다.</div>;
}

NoHeaderFooterPage.getLayout = function getLayout(page) {
  return <>{page}</>;
};

커스텀 레이아웃 컴포넌트 사용하기:

각 페이지에서 커스텀 레이아웃 컴포넌트를 정의하여 사용할 수 있다.
예를 들어, 다음과 같이 withLayout HOC (Higher Order Component)를 사용할 수 있다.

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

const withLayout = (Page) => {
  const WithLayout = (props) => {
    if (props.noLayout) {
      return <Page {...props} />;
    }

    return (
      <>
        <Header />
        <Page {...props} />
        <Footer />
      </>
    );
  };

  return WithLayout;
};

export default withLayout;

// pages/index.js
import withLayout from '../components/withLayout';

const HomePage = () => {
  return <div>홈 페이지 내용</div>;
};

export default withLayout(HomePage);

// pages/no-header-footer.js
import withLayout from '../components/withLayout';

const NoHeaderFooterPage = () => {
  return <div>이 페이지는 헤더와 푸터가 없습니다.</div>;
};

NoHeaderFooterPage.getInitialProps = async () => {
  return { noLayout: true };
};

export default withLayout(NoHeaderFooterPage);

---

route 그룹을 만들기

이 방법을 사용하면 라우트 그룹에 대해 공통 레이아웃을 쉽게 적용하고 관리할 수 있다. 예를 들어, /admin 경로에 대해 다른 레이아웃을 적용하고 싶을 때 유용하다.

다음은 Next.js에서 라우트 그룹을 만들어 레이아웃을 적용하는 방법이다.

폴더 구조 만들기:

먼저, 폴더 구조를 만들어 라우트 그룹을 구성한다.
예를 들어, /admin 경로에 대한 그룹을 만든다면, pages/admin 폴더를 생성한다.

pages/
├── admin/
│ ├── index.js
│ ├── dashboard.js
│ └── settings.js
├── _app.js
└── index.js

그룹 레이아웃 컴포넌트 만들기:

components/AdminLayout.js와 같은 레이아웃 컴포넌트를 만들어 /admin 경로의 모든 페이지에서 사용할 수 있도록 한다.

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

const AdminLayout = ({ children }) => {
  return (
    <div>
      <Header />
      <main>{children}</main>
      <Footer />
    </div>
  );
};

export default AdminLayout;

라우트 그룹의 페이지에서 레이아웃 적용하기:

pages/admin 폴더 내의 모든 페이지에서 공통 레이아웃을 적용한다.
이 경우 getLayout 함수를 사용하여 레이아웃을 적용할 수 있다.

// pages/admin/index.js
import AdminLayout from '../../components/AdminLayout';

const AdminHomePage = () => {
  return <div>Admin Home Page</div>;
};

AdminHomePage.getLayout = function getLayout(page) {
  return <AdminLayout>{page}</AdminLayout>;
};

export default AdminHomePage;

// pages/admin/dashboard.js
import AdminLayout from '../../components/AdminLayout';

const AdminDashboardPage = () => {
  return <div>Admin Dashboard</div>;
};

AdminDashboardPage.getLayout = function getLayout(page) {
  return <AdminLayout>{page}</AdminLayout>;
};

export default AdminDashboardPage;

_app.js에서 getLayout 함수 사용하기:

getLayout 함수를 적용하여 각 페이지에서 정의한 레이아웃을 사용할 수 있도록 _app.js를 수정한다.

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page);

  return getLayout(<Component {...pageProps} />);
}

export default MyApp;

이렇게 하면 /admin 경로 아래의 모든 페이지에 대해 AdminLayout 레이아웃을 적용할 수 있다.