data/blog/new-features-in-v1.mdx

@@ -123,23 +123,28 @@ The `DEFAULT_LAYOUT` for blog posts page is set to `PostLayout`.
 
 ### Extend
 
-The layout mapping is handled by the `MDXLayoutRenderer` component.
+`layout` is mapped to wrapper which wraps the entire MDX content.
-It's a glue component which imports the specified layout, processes the MDX content before passing it back to the layout component as children.
 
 ```js
-export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
+export const MDXComponents = {
-  const LayoutComponent = require(`../layouts/${layout}`).default
+  Image,
+  a: CustomLink,
+  pre: Pre,
+  wrapper: ({ components, layout, ...rest }) => {
+    const Layout = require(`../layouts/${layout}`).default
+    return <Layout {...rest} />
+  },
+}
 
-  return (
+export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
-    <LayoutComponent {...rest}>
+  const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])
-      <MDXRemote {...mdxSource} components={MDXComponents} />
+
-    </LayoutComponent>
+  return <MDXLayout layout={layout} components={MDXComponents} {...rest} />
-  )
 }
 ```
 
-Use the component is a page where you want to accept a layout name to map to the desired layout.
+Use the `MDXLayoutRenderer` component in a page where you want to accept a layout name to map to the desired layout.
-You need to pass the layout name from the layout folder (it has to be an exact match) and the mdxSource content which is an output of the `seralize` function from the `next-mdx-remote` library.
+You need to pass the layout name from the layout folder (it has to be an exact match).
 
 ## Blog comments system