Added shared layout with _app

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

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>
+  )
 }

pages/index.tsx

@@ -14,9 +14,7 @@ export default function Home({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   console.log('PRODUCTS', products)
-  return (
+  return <ProductGrid products={products} />
-    <Layout>
-      <ProductGrid products={products} />
-    </Layout>
-  )
 }
+
+Home.Layout = Layout

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 (
+  return router.isFallback ? (
-    <Layout>
+    <h1>Loading...</h1>
-      {router.isFallback ? (
+  ) : (
-        <h1>Loading...</h1>
+    <ProductView productData={productData} />
-      ) : (
-        <ProductView productData={productData} />
-      )}
-    </Layout>
   )
 }
+
+Slug.Layout = Layout