Next.js를 사용할 때 _app.js에서 특정 컴포넌트 렌더링 시 Layout을 적용 제외하기 위한 방법

폴더 구조

├── components
│   ├── AppLayout
│   │   ├── AppLayout.css
│   │   └── AppLayout.js
│   ├── Post.js
│   ├── auth
│   │   ├── AuthForm.js
│   │   └── AuthTemplate.js
│   └── common
│       └── Modal.js
├── pages
│   ├── _app.js
│   ├── index.js
│   ├── login.js

login.js에서 getInitialProps 작성

Server Side Rendering을 위해 pages/login.js에서 getInitialProps를 작성한다. 클라이언트 사이드 렌더링 전에 미리 프론트 서버에서 데이터를 받아서 활용하기 위함이다.

getInitialProps

Component.getInitialProps 는 Next가 추가한 React lifecycle의 일종으로서 componentDidMount보다 먼저 실행됨. 서버에서도 실행되고, 프론트에서도 실행
서버의 데이터를 미리 가져오거나, 서버에서 실행될 동작을 수행할 수 있음.
참조: Frontend - Next.js: getInitialProps, Link

getInitialProps 함수에서 ctx를 argument로 가져오는데, ctx객체에 관해서는 링크를 확인하는 것을 추천드립니다.

pages/login.js

import React, { memo } from 'react';
import AuthTemplate from '../components/auth/AuthTemplate';
import AuthForm from '../components/auth/AuthForm';

const LoginPage = memo(() => {
  return (
    <AuthTemplate>
      <AuthForm />
    </AuthTemplate>
  );
});

LoginPage.getInitialProps = async (ctx) => {
  const pathname = ctx.pathname;

  return { pathname };
};

export default LoginPage;

_app.js에서 getInitialProps 작성

getInitialProps를 작성하여 pages폴더의 컴포넌트(_app.js의 Components)에 getInitialProps가 있다면 return 값을 _app.js.getInitialProps의 pagesProps로 초기화한다. 전달받은 pagesProps는 자식 컴포넌트들로 전달된다.

pages/_app.js

...

const MyApp = ({ Component, pageProps, store }) => {
  return (pageProps && pageProps.pathname) === '/login' ||
    (pageProps && pageProps.pathname) === '/register' ? (
    <Provider store={store}>
      <Component {...pageProps} /> 
    </Provider> // pageProps.pathname === '/login' 일 때는 Layout 없이 렌더링
  ) : (
    <Provider store={store}>
      <AppLayout>
        <Component {...pageProps} />
      </AppLayout>
    </Provider>
  );
};

MyApp.getInitialProps = async (context) => {
  const { ctx, Component } = context;
  let pageProps = {};

  if (Component.getInitialProps) {
    // Component (pages 폴더에 있는 컴포넌트)에 getInitialProps가 있다면
    pageProps = (await Component.getInitialProps(ctx)) || {};

    return { pageProps };
  }
};

export default withRedux(makeStore)(MyApp);