Layouts

    The React model allows us to deconstruct a into a series of components. Many of these components are often reused between pages. For example, you might have the same navigation bar and footer on every page.

    If you only have one layout for your entire application, you can create a Custom App and wrap your application with the layout. Since the component is re-used when changing pages, its component state will be preserved (e.g. input values).

    1. // pages/_app.js
    3. import Layout from '../components/layout'
    5. export default function MyApp({ Component, pageProps }) {
    6.   return (
    7.     <Layout>
    8.       <Component {...pageProps} />
    9.   )
    10. }
    1. // pages/_app.js
    4.   // Use the layout defined at the page level, if available
    5.   const getLayout = Component.getLayout || ((page) => page)
    7.   return getLayout(<Component {...pageProps} />)
    8. }

    When navigating between pages, we want to persist page state (input values, scroll position, etc.) for a Single-Page Application (SPA) experience.

    This layout pattern enables state persistence because the React component tree is maintained between page transitions. With the component tree, React can understand which elements have changed to preserve state.

    Note: This process is called reconciliation, which is how React understands which elements have changed.

    1. // pages/_app.tsx
    3. import type { ReactElement, ReactNode } from 'react'
    4. import type { NextPage } from 'next'
    7.   getLayout?: (page: ReactElement) => ReactNode
    8. }
    10. type AppPropsWithLayout = AppProps & {
    11.   Component: NextPageWithLayout
    12. }
    14. export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
    15.   // Use the layout defined at the page level, if available
    16.   const getLayout = Component.getLayout ?? ((page) => page)
    18.   return getLayout(<Component {...pageProps} />)

    Inside your layout, you can fetch data on the client-side using useEffect or a library like . Because this file is not a Page, you cannot use or getServerSideProps currently.

    For more information on what to do next, we recommend the following sections: