2022-09-14 19:15:48 -07:00
|
|
|
import React from "react";
|
|
|
|
import type { NextPageWithLayout } from "./_app";
|
2022-09-14 18:38:58 -07:00
|
|
|
// import App from '../src'
|
[WIP] Run cra-to-next codemod to be on Nextjs
I'm interested in ejecting from Vercel, so I'm trying to get off their proprietary-ish create-react-app + Vercel API thing, and onto Nextjs, which is very similar in shape, but more portable.
I had to disable `craCompat` in `next.config.js` to stop us from crashing on their webpack config, see https://github.com/vercel/next.js/discussions/25858#discussioncomment-1573822
The frontend seems to work at a basic level, but network requests fail, and images don't seem to be working. I'll work on those next!
Note that this commit was forced through despite failing lint checks. We'll need to fix that up too!
Also, after the codemod, I moved `src/pages` to the more canonical location `pages`. Lint tooling seemed surprised to not find a `pages` directory, and I didn't see a config that was making it work correctly in the other location, so I figured it's that Next is willing to check `pages` or `src/pages`? But this is more canonical so yeah!
2021-11-01 21:48:09 -07:00
|
|
|
|
|
|
|
// 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
|
2022-09-14 18:38:58 -07:00
|
|
|
const App = dynamic(() => import("../src/app/App"), { ssr: false });
|
[WIP] Run cra-to-next codemod to be on Nextjs
I'm interested in ejecting from Vercel, so I'm trying to get off their proprietary-ish create-react-app + Vercel API thing, and onto Nextjs, which is very similar in shape, but more portable.
I had to disable `craCompat` in `next.config.js` to stop us from crashing on their webpack config, see https://github.com/vercel/next.js/discussions/25858#discussioncomment-1573822
The frontend seems to work at a basic level, but network requests fail, and images don't seem to be working. I'll work on those next!
Note that this commit was forced through despite failing lint checks. We'll need to fix that up too!
Also, after the codemod, I moved `src/pages` to the more canonical location `pages`. Lint tooling seemed surprised to not find a `pages` directory, and I didn't see a config that was making it work correctly in the other location, so I figured it's that Next is willing to check `pages` or `src/pages`? But this is more canonical so yeah!
2021-11-01 21:48:09 -07:00
|
|
|
|
2022-09-14 19:15:48 -07:00
|
|
|
const FallbackPage: NextPageWithLayout = () => {
|
|
|
|
return <App />;
|
|
|
|
};
|
|
|
|
|
|
|
|
// This old fallback page uses App, which already has PageLayout built-in.
|
[WIP] Refactor to renderWithLayout function
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
2022-09-14 22:50:56 -07:00
|
|
|
FallbackPage.renderWithLayout = (children: JSX.Element) => children;
|
2022-09-14 19:15:48 -07:00
|
|
|
|
|
|
|
export default FallbackPage;
|