[231220] Nextjs Custom Errors, Layout

Custom Errors

• Nextjs 에서 404 에러 났을때 나오도록 하는 기본적으로 정적 페이지를 제공함
• 커스텀해서 쓰고 싶으면 pages/404.tsx 이런식으로 파일 만들어주면 됨
• 공식문서

Layout

• 페이지에 getLayout 속성을 추가하여 레이아웃에 대한 React 구성 요소를 반환할 수 있음

1. _app.tsx 타입 정의

import type { ReactElement, ReactNode } from "react"
import type { NextPage } from "next"
import type { AppProps } from "next/app"

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) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page)

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

1. getLayout 적용

import type { ReactElement } from "react"
import Layout from "../components/layout"
import NestedLayout from "../components/nested-layout"
import type { NextPageWithLayout } from "./_app"

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

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      // 내가 정의한 Layout 넣으면됨
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

export default Page

• 공식문서