Custom APP

레이아웃을 알기전에 알고 있어야 되는 기능입니다.
NextJS는 App에서 페이지를 초기화 합니다. App에서는 다음과 같은 역할을 수행 할 수있습니다.

• 페이지의 기본 레이아웃 유지
• 페이지 변경 시 상태 유지
• 페이지에 추가 데이터 삽입
• 글로벌 CSS 설정

기본형태는 숨겨져 있기 때문에 재정의 할려면 App파일을 만들어야합니다.
경로와 이름을 똑같이 해주셔야합니다.
pages/_app.tsx

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

• Component : 현재 페이지 컴포넌트를 뜻합니다.
• pageProps : 페이지에 미리 로드된 초기 데이터가 있습니다.
  - getStaticProps, getServerSideProps등으로 가져온 데이터들이 있습니다.

🚨 주의사항
-앱 실행 중 App을 수정 했을 경우 서버를 다시 시작해야 변경사항이 적용됩니다.
-커스텀앱에선 정적 외부 데이터 가져오기가 적용되지 않습니다.

Layout

단일 레이아웃

전체 페이지에서 하나의 레이아웃만 있는 경우 다음과 같이 설정 할 수 있습니다.

// pages/_app.js

import type { AppProps } from 'next/app'
import Layout from '../components/layout'

export default function MyApp({ Component, pageProps } : AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

페이지별 레이아웃

페이지 별로 레이아웃이 다를 경우 다음과 같이 getLayout페이지 속성을 추가하여 페이지별로 레이아웃을 정의 할 수 있습니다.

// pages/index.tsx

import type { ReactElement } from 'react'
import Layout from '../components/layout'
import type { NextPageWithLayout } from './_app'

const Page: NextPageWithLayout = () => {
  return <p>hello world</p>
}

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      {page}
    </Layout>
  )
}

export default Page

레이아웃을 적용 할 컴포넌트는 위 처럼 정의하고

import { NextPage } from "next";
import { AppProps } from "next/app";
import { ReactElement, ReactNode } from "react";
import "../styles/globals.css";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // ??연산자는 NULL | UNDEFINED일 경우 다음것이 실행되는 연산자입니다.
  // 원랜 없었는데 이번에 새로나옴 개꿀입니다.
  // rend ??= "난 널이였어"; 이런식으로도 사용가능해요
  const getLayout = Component.getLayout ?? ((page) => page);

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

App을 위와 같이 정의해주면 레이아웃이 적용 됩니다.