nextjs: 페이지 내 레이아웃 이벤트 듣기

전역 상태 [callable, setCallable]는 페이지가 레이아웃 이벤트를 수신하도록 하는 좋은 디자인입니다.
예시:
MyLayout 레이아웃의 AppBar에 인쇄 버튼이 있을 수 있습니다.
그런 다음 각 페이지는 setCallable({ print: () => alert('print me') })을 호출합니다.

/* _app.tsx */
import "../styles/globals.css";
import type { AppProps } from "next/app";
import MyLayout from "../components/MyLayout";
import { useState } from "react";

function MyApp({ Component, pageProps }: AppProps) {
  const [callable, setCallable] = useState();
  return (
      <MyLayout callable={callable}>
        <Component {...pageProps} setCallable={setCallable} />
      </MyLayout>
  );
}

export default MyApp;

/* MyLayout.tsx */
export default function MyLayout({ children, callable }) {
  return (
    <>
      <AppBar position="fixed" open={open}>
        <Toolbar>
          {callable?.print && (
            <IconButton onClick={callable.print}>
              <Print />
            </IconButton>
          )}
          {/*Other buttons to call other callbacks can be added here*/}
        </Toolbar>
      </AppBar>
      <main>{children}</main>
    </>
  );
}

/* MyPage.tsx */
export default function MyPage(props: any) {
  useEffect(() => {
    props.setCallable?.({
      print: () => alert("print the current page"),
      /* Other callbacks can be added here */
    });
  }, []);
}