From cf7c85e3bae4a8176e66f21b3d825e7b146e43d6 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Thu, 1 Oct 2020 21:30:08 -0500
Subject: [PATCH] Added shared layout with _app

---
 components/core/Layout/Layout.tsx |  1 +
 pages/_app.tsx                    | 11 ++++++++++-
 pages/index.tsx                   |  8 +++-----
 pages/product/[slug].tsx          | 16 +++++++---------
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 246028878..8dec4a719 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -14,6 +14,7 @@ interface Props {
 const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
   const { displaySidebar } = useUI()
+
   return (
     <div className={rootClassName}>
       <Featurebar
diff --git a/pages/_app.tsx b/pages/_app.tsx
index a5adb8f90..c84409786 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,15 @@
+import { FC } from 'react'
 import type { AppProps } from 'next/app'
 import '@assets/global.css'
 
+const Noop: FC = ({ children }) => <>{children}</>
+
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  const Layout = (Component as any).Layout || Noop
+
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 6e5a6b5f5..597943825 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -14,9 +14,7 @@ export default function Home({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   console.log('PRODUCTS', products)
-  return (
-    <Layout>
-      <ProductGrid products={products} />
-    </Layout>
-  )
+  return <ProductGrid products={products} />
 }
+
+Home.Layout = Layout
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index e362daa1f..ed06a97fa 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -43,7 +43,7 @@ export async function getStaticPaths() {
   }
 }
 
-export default function Home({
+export default function Slug({
   product,
   productData,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
@@ -51,13 +51,11 @@ export default function Home({
 
   const router = useRouter()
 
-  return (
-    <Layout>
-      {router.isFallback ? (
-        <h1>Loading...</h1>
-      ) : (
-        <ProductView productData={productData} />
-      )}
-    </Layout>
+  return router.isFallback ? (
+    <h1>Loading...</h1>
+  ) : (
+    <ProductView productData={productData} />
   )
 }
+
+Slug.Layout = Layout