diff --git a/beta/next.config.js b/beta/next.config.js
index df4b65d46..f05f5abb7 100644
--- a/beta/next.config.js
+++ b/beta/next.config.js
@@ -52,6 +52,7 @@ module.exports = {
             remarkPlugins,
           },
         },
+        path.join(__dirname, './plugins/md-layout-preloader'),
       ],
     });
 
diff --git a/beta/plugins/md-layout-loader.js b/beta/plugins/md-layout-loader.js
index 70650a175..8d79f6f0e 100644
--- a/beta/plugins/md-layout-loader.js
+++ b/beta/plugins/md-layout-loader.js
@@ -1,17 +1,9 @@
-const fm = require('gray-matter');
-const path = require('path');
-
-const layouts = {
-  apis: 'LayoutAPI',
-  learn: 'LayoutLearn',
-};
-
 module.exports = async function (src) {
   const callback = this.async();
   const code = `
   import * as AllComponents from 'components_new/AllComponents.server';
   global.COMPONENTS = AllComponents;
-  ${src}
+  ${src.replace('const layoutProps = {', 'const layoutProps = { data,')}
   `;
   return callback(null, code);
 };
diff --git a/beta/plugins/md-layout-preloader.js b/beta/plugins/md-layout-preloader.js
new file mode 100644
index 000000000..068033724
--- /dev/null
+++ b/beta/plugins/md-layout-preloader.js
@@ -0,0 +1,11 @@
+const fm = require('gray-matter');
+
+module.exports = async function (src) {
+  const callback = this.async();
+  const {content, data} = fm(src);
+  const code = `
+export const data = ${JSON.stringify(data)};
+  ${content}
+  `;
+  return callback(null, code);
+};
diff --git a/beta/src/components_new/AllComponents.server.js b/beta/src/components_new/AllComponents.server.js
index c42edb0e8..d4d919854 100644
--- a/beta/src/components_new/AllComponents.server.js
+++ b/beta/src/components_new/AllComponents.server.js
@@ -1,17 +1,28 @@
 import Link from './Link.client';
+import LayoutAPI from './LayoutAPI.server';
+import LayoutLearn from './LayoutLearn.server';
+
 export const a = Link;
 
 export function Hello() {
   return <h1>hi</h1>;
 }
 
-export const wrapper = function Wrapper({children}) {
+export const wrapper = function Wrapper({router, data, children}) {
+  if (!router) {
+    throw Error('noooo');
+  }
+
+  let Layout = LayoutLearn;
+  if (router.pathname.startsWith('/apis/')) {
+    Layout = LayoutAPI;
+  }
+
   return (
-    <div
-      style={{
-        border: '1px solid red',
-      }}>
+    <Layout>
+      {JSON.stringify(data)}
+      <hr />
       {children}
-    </div>
+    </Layout>
   );
 };
diff --git a/beta/src/components_new/LayoutAPI.server.tsx b/beta/src/components_new/LayoutAPI.server.tsx
new file mode 100644
index 000000000..49dbc1027
--- /dev/null
+++ b/beta/src/components_new/LayoutAPI.server.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+
+// @ts-ignore
+export default function LayoutAPI({children}: {children: any}) {
+  return (
+    <>
+      <h1>your in api</h1>
+      <input placeholder="Search" />
+      <hr />
+      {children}
+    </>
+  );
+}
diff --git a/beta/src/components_new/LayoutLearn.server.tsx b/beta/src/components_new/LayoutLearn.server.tsx
new file mode 100644
index 000000000..ca95f7de3
--- /dev/null
+++ b/beta/src/components_new/LayoutLearn.server.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+
+if (typeof alert !== 'undefined') {
+  alert('lalala');
+}
+
+// @ts-ignore
+export default function LayoutLearn({children}: {children: any}) {
+  return (
+    <>
+      <h1>your in learn</h1>
+      <input placeholder="Search" />
+      <hr />
+      {children}
+    </>
+  );
+}
diff --git a/beta/src/pages/apis/usestate.server.md b/beta/src/pages/apis/usestate.server.md
index 55fda820a..0d212776b 100644
--- a/beta/src/pages/apis/usestate.server.md
+++ b/beta/src/pages/apis/usestate.server.md
@@ -1,3 +1,7 @@
+---
+title: useState
+---
+
 ## usestate page {/*usestate-page*/}
 
 lalalal  [go to props](/learn/props)
diff --git a/beta/src/pages/test.server.js b/beta/src/pages/test.server.js
new file mode 100644
index 000000000..c8b257ef1
--- /dev/null
+++ b/beta/src/pages/test.server.js
@@ -0,0 +1,3 @@
+export default function Hi() {
+  return <h1>hi</h1>;
+}