4466ba436b
## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import type { NextPageWithLayout } from "./_app";
|
||
import Layout from "../components/layout";
|
||
import Sidebar from "../components/sidebar";
|
||
|
||
const Contact: NextPageWithLayout = () => {
|
||
return (
|
||
<section>
|
||
<h2>Layout Example (Contact)</h2>
|
||
<p>
|
||
This example adds a property <code>getLayout</code> to your page,
|
||
allowing you to return a React component for the layout. This allows you
|
||
to define the layout on a per-page basis. Since we're returning a
|
||
function, we can have complex nested layouts if desired.
|
||
</p>
|
||
<p>
|
||
When navigating between pages, we want to persist page state (input
|
||
values, scroll position, etc.) for a Single-Page Application (SPA)
|
||
experience.
|
||
</p>
|
||
<p>
|
||
This layout pattern will allow for state persistence because the React
|
||
component tree is persisted between page transitions. To preserve state,
|
||
we need to prevent the React component tree from being discarded between
|
||
page transitions.
|
||
</p>
|
||
<h3>Try It Out</h3>
|
||
<p>
|
||
To visualize this, try tying in the search input in the{" "}
|
||
<code>Sidebar</code> and then changing routes. You'll notice the input
|
||
state is persisted.
|
||
</p>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default Contact;
|
||
|
||
Contact.getLayout = function getLayout(page: React.ReactElement) {
|
||
return (
|
||
<Layout>
|
||
<Sidebar />
|
||
{page}
|
||
</Layout>
|
||
);
|
||
};
|