フロントエンド開発といえば。
next.js アプリの初期化( npx create-next-app@latest --use-npm <アプリ名> )

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

● 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.js の作成

メインの children のところが各ページ内容に置き換わります

mkdir components
vi components/Layout.js

components/Layout.jsx

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/helloworld.tsx

const Helloworld = () => {
  return (
    <div>
      <h1>Helloworld</h1>
    </div>
  );
};
export default Helloworld;

  ↓  変更後の src/pages/helloworld.tsx

import SimpleLayout from "@/layouts/SimpleLayout";
import { ReactNode } from "react";

export default function Helloworld() {
  return (
    <div>
      <h1>ハローワールド</h1>
    </div>
  );
}

Helloworld.getLayout = (page: ReactNode) => {
  return <SimpleLayout>{page}</SimpleLayout>;
};
No.2119
03/07 18:05

edit