Matchu
17a7e2de81
Okay, when I saw the recipe in the Next.js docs with `getLayout`, I was like "psh this API is so confusing, this should just be a component" anyway now we see why it wasn't a component: the _whole point_ of it was to circumvent the usual React diffing algorithm's belief that two different components _can't_ ever share UI. But here we were, making different `layoutComponent`s that were meant to share UI, lol! Anyway, if you just _return JSX in a function_, the React diffing algorithm never sees that it came from a different place, so it's generous when diffing them. Neat! But I still changed the recipe's `getLayout` name to `renderWithLayout`, because it just confused me so much at first lol, I thought it was going to like, return a layout function? This is much clearer verbing to me imo
22 lines
807 B
TypeScript
22 lines
807 B
TypeScript
import React from "react";
|
|
import type { NextPageWithLayout } from "./_app";
|
|
// import App from '../src'
|
|
|
|
// next/dynamic is used to prevent breaking incompatibilities
|
|
// with SSR from window.SOME_VAR usage, if this is not used
|
|
// next/dynamic can be removed to take advantage of SSR/prerendering
|
|
import dynamic from "next/dynamic";
|
|
|
|
// try changing "ssr" to true below to test for incompatibilities, if
|
|
// no errors occur the above static import can be used instead and the
|
|
// below removed
|
|
const App = dynamic(() => import("../src/app/App"), { ssr: false });
|
|
|
|
const FallbackPage: NextPageWithLayout = () => {
|
|
return <App />;
|
|
};
|
|
|
|
// This old fallback page uses App, which already has PageLayout built-in.
|
|
FallbackPage.renderWithLayout = (children: JSX.Element) => children;
|
|
|
|
export default FallbackPage;
|