● Next. js でgetLayout パターンで共通のレイアウトページを作成する

1. _app.tsx を変更する

変更前の _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} />);
}

2 . 共通レイアウト Layout.tsx の作成

メインの 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;

3 . レイアウトを各ページへ適用

変更前の 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