Add Persistent layout to new app template with <Layout> and getLayout() (#897)

Co-authored-by: Brandon Bayer <b@bayer.ws> (minor)
2025-12-19 18:11:23 -05:00 · 2020-08-19 07:58:40 +10:00
parent 5f68bda686
commit 18beb6fb1d
10 changed files with 60 additions and 23 deletions
--- a/MEETING_NOTES.md
+++ b/MEETING_NOTES.md
@@ -1,21 +1,19 @@
-
 # 2020-08-17 Blitz Contributor Call

 - Attending: Brandon Bayer, Adam Markon, Kellen Mace, Myron Davis, Dwight Watson
 - Brandon:
-    - Auth out, set up by default in canary release
-    - Need to work on a potential CSRF bug
-    - Next major release will include auth by default and allow you to choose your form library
-    - Next auth features are email confirmation
-    - After that, logging and plugins are next
+  - Auth out, set up by default in canary release
+  - Need to work on a potential CSRF bug
+  - Next major release will include auth by default and allow you to choose your form library
+  - Next auth features are email confirmation
+  - After that, logging and plugins are next
 - Adam:
-    - Overhauled the recipe infrastructure. Now using jscodeshift instead of recast
-    - Added support for conditional JSX in templates
-    - Going to work on custom templates next
+  - Overhauled the recipe infrastructure. Now using jscodeshift instead of recast
+  - Added support for conditional JSX in templates
+  - Going to work on custom templates next
 - Dwight
-    - Has been opening issues for problems
-    - Made a few PRs for some issues
-
+  - Has been opening issues for problems
+  - Made a few PRs for some issues

 # 2020-07-07 Blitz Contributor Call

--- a/README.md
+++ b/README.md
@@ -332,6 +332,7 @@ Thanks to these wonderful people ([emoji key](https://allcontributors.org/docs/e

 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->

 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,3 +1,6 @@
+import {NextPage, NextComponentType} from "next"
+import {AppProps as NextAppProps} from "next/app"
+
 export * from "./use-query"
 export * from "./use-paginated-query"
 export * from "./use-params"
@@ -22,13 +25,10 @@ export {
  GetServerSideProps,
  InferGetStaticPropsType,
  InferGetServerSidePropsType,
-  NextPage as BlitzPage,
  NextApiRequest as BlitzApiRequest,
  NextApiResponse as BlitzApiResponse,
 } from "next"

-export {AppProps} from "next/app"
-
 export {default as Head} from "next/head"

 export {default as Link} from "next/link"
@@ -49,4 +49,14 @@ export {default as dynamic} from "next/dynamic"

 export {default as ErrorComponent} from "next/error"

+export type BlitzComponentType = NextComponentType
+
+export interface AppProps extends NextAppProps {
+  Component: BlitzComponentType & {
+    getLayout?: (component: JSX.Element) => JSX.Element
+  }
+}
+export type BlitzPage<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (component: JSX.Element) => JSX.Element
+}
 export {isLocalhost} from "./utils/index"
--- a/packages/generator/templates/app/app/layouts/Layout.tsx
+++ b/packages/generator/templates/app/app/layouts/Layout.tsx
@@ -0,0 +1,14 @@
+import { Head } from "blitz"
+
+const Layout = ({ title, children }) => (
+  <>
+    <Head>
+      <title>{title || "__name__"}</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+
+    {children}
+  </>
+)
+
+export default Layout
--- a/packages/generator/templates/app/app/pages/_app.tsx
+++ b/packages/generator/templates/app/app/pages/_app.tsx
@@ -4,6 +4,8 @@ import { queryCache } from "react-query"
 import LoginForm from "app/auth/components/LoginForm"

 export default function App({ Component, pageProps }: AppProps) {
+  const getLayout = Component.getLayout || ((page) => page)
+
  return (
    <ErrorBoundary
      FallbackComponent={RootErrorFallback}
@@ -13,7 +15,7 @@ export default function App({ Component, pageProps }: AppProps) {
        queryCache.resetErrorBoundaries()
      }}
    >
-      <Component {...pageProps} />
+      {getLayout(<Component {...pageProps} />)}
    </ErrorBoundary>
  )
 }
--- a/packages/generator/templates/app/app/pages/index.tsx
+++ b/packages/generator/templates/app/app/pages/index.tsx
@@ -1,4 +1,5 @@
-import { Head, Link, useSession } from "blitz"
+import Layout from "app/layouts/layout"
+import { Link, useSession } from "blitz"
 import logout from "app/auth/mutations/logout"

 /*
@@ -6,16 +7,11 @@ import logout from "app/auth/mutations/logout"
 * You can delete everything in here and start from scratch if you like.
 */

-export default function Home() {
+const Home = () => {
  const session = useSession()

  return (
    <div className="container">
-      <Head>
-        <title>__name__</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
      <main>
        <div className="logo">
          <img src="/logo.png" alt="blitz.js" />
@@ -249,3 +245,7 @@ export default function Home() {
    </div>
  )
 }
+
+Home.getLayout = (page) => <Layout title="Home">{page}</Layout>
+
+export default Home
--- a/packages/generator/templates/page/modelIdParam.tsx
+++ b/packages/generator/templates/page/modelIdParam.tsx
@@ -1,4 +1,5 @@
 import React, {Suspense} from "react"
+import Layout from "app/layouts/Layout"
 import {Head, Link, useRouter, useQuery, useParam, BlitzPage} from "blitz"
 import get__ModelName__ from "app/__modelNamesPath__/queries/get__ModelName__"
 import delete__ModelName__ from "app/__modelNamesPath__/mutations/delete__ModelName__"
@@ -90,4 +91,6 @@ const Show__ModelName__Page: BlitzPage = () => {
  )
 }

+Show__ModelName__Page.getLayout = (page) => <Layout title={"__ModelName__"}>{page}</Layout>
+
 export default Show__ModelName__Page
--- a/packages/generator/templates/page/modelIdParam/edit.tsx
+++ b/packages/generator/templates/page/modelIdParam/edit.tsx
@@ -1,4 +1,5 @@
 import React, {Suspense} from "react"
+import Layout from "app/layouts/Layout"
 import {Head, Link, useRouter, useQuery, useParam, BlitzPage} from "blitz"
 import get__ModelName__ from "app/__modelNamesPath__/queries/get__ModelName__"
 import update__ModelName__ from "app/__modelNamesPath__/mutations/update__ModelName__"
@@ -81,4 +82,6 @@ const Edit__ModelName__Page: BlitzPage = () => {
  )
 }

+Edit__ModelName__Page.getLayout = (page) => <Layout title={"Edit __ModelName__"}>{page}</Layout>
+
 export default Edit__ModelName__Page
--- a/packages/generator/templates/page/index.tsx
+++ b/packages/generator/templates/page/index.tsx
@@ -1,4 +1,5 @@
 import React, {Suspense} from "react"
+import Layout from "app/layouts/Layout"
 if (process.env.parentModel) {
  import {Head, Link, useQuery, useParam, BlitzPage} from "blitz"
 } else {
@@ -86,4 +87,6 @@ const __ModelNames__Page: BlitzPage = () => {
  )
 }

+__ModelNames__Page.getLayout = (page) => <Layout title={"__ModelNames__"}>{page}</Layout>
+
 export default __ModelNames__Page
--- a/packages/generator/templates/page/new.tsx
+++ b/packages/generator/templates/page/new.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import Layout from "app/layouts/Layout"
 if (process.env.parentModel) {
  import {Head, Link, useRouter, useParam, BlitzPage} from "blitz"
 } else {
@@ -66,4 +67,6 @@ const New__ModelName__Page: BlitzPage = () => {
  )
 }

+New__ModelName__Page.getLayout = (page) => <Layout title={"Create New __ModelName__"}>{page}</Layout>
+
 export default New__ModelName__Page