Next.jsの永続的レイアウト
code:_app.tsx
import { NextPage } from "next";
import { AppProps } from "next/app";
import React from "react";
import DefaultLayout from "../layouts/DefaultLayout";
type AppPropsWithLayout = AppProps & {
getLayout: (page: React.ReactNode) => JSX.Element;
};
};
const App: NextPage<AppPropsWithLayout> = (props) => {
const { Component, pageProps } = props;
const getLayout =
Component.getLayout ?? ((page) => <DefaultLayout>{page}</DefaultLayout>);
return getLayout(<Component {...pageProps} />);
};
export default App;
code:DefaultLayout.tsx
const DefaultLayout: React.FC = ({ children }) => (
<div>
<div>DefaultLayout</div>
<div>
<iframe
width="560"
height="315"
frameBorder={0}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
</iframe>
</div>
<div>{children}</div>
</div>
);
export const getLayout = (page: React.ReactNode) => (
<DefaultLayout>{page}</DefaultLayout>
);
export default DefaultLayout;