変更前の _app.tsx
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
↓ 変更後の _app.tsx
import "@/styles/globals.css";
import { ReactElement, ReactNode } from "react";
import { NextPage } from "next";
import type { AppProps } from "next/app";
type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactNode;
};
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};
export default function App({ Component, pageProps }: AppPropsWithLayout) {
const getLayout =
Component.getLayout ||
((page) => {
return page;
});
return getLayout(<Component {...pageProps} />);
}
メインの children のところが各ページ内容に置き換わります
mkdir components
vi components/Layout.tsx
components/Layout.tsx
import React from "react";
interface Props {
children?: React.ReactNode;
}
const SimpleLayout: React.FC<Props> = ({ children }: Props) => {
return (
<>
<h1>header</h1>
{/* ===== メイン ===== */}
<main>{children}</main>
{/* ===== /メイン ===== */}
<h1>footer</h1>
</>
);
};
export default SimpleLayout;
変更前の src/pages/mypage/index.tsx
import { Mypage } from '@/features/mypage/Mypage'
import LoggedInLayout from '@/layouts/LoggedInLayout'
import { ReactNode } from 'react'
import { NextPageWithLayout } from '@/pages/_app'
const PagesMypage: NextPageWithLayout = () => {
return <Mypage />
}
PagesMypage.getLayout = (page: ReactNode) => {
return <LoggedInLayout>{page}</LoggedInLayout>
}
export default PagesMypage