NextJS 每页面布局不适用于打字稿

Question

我正在使用 Typescript 在 NextJS 12 中开发新应用程序。我已经定义了两个页面注册页面和主页，我想对此页面应用不同的布局，我已遵循官方的 next js 文档，我可以在浏览器中看到“注册页面”文本，但布局不适用于页面输出，我我在代码中遗漏了一些东西吗？下面是我的代码。

寄存器.tsx

const UserRegistration: NextPageWithLayout = () => {
    return <h1>Registration Page</h1>
}

UserRegistration.getLayout = (page: ReactElement) => {
    return (
        <DefaultLayout>{page}</DefaultLayout>
    )
}

export default UserRegistration;

_app.tsx

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout || ((page) => page)
  return getLayout(<Component {...pageProps} />)
}

export default MyApp

类型.ts

export type NextPageWithLayout = NextPage & { getLayout: (page: ReactElement) => ReactNode };

export type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout }

export type DefaultLayoutType = { children: ReactNode }

布局.tsx

const DefaultLayout = ({ children }: DefaultLayoutType) => {
    return(
        <div id="main">
            <nav>
                <li>
                    Home
                </li>
            </nav>
            {children}
        </div>
    )
}

export default DefaultLayout;